django jquery 自动完成搜索框不显示结果
django jquery autocomplete search box not displaying results
我浏览了一些在线资源以利用 jquery
autocomplete
来填充我的搜索框。
但是,当我输入 search box
时,没有返回搜索结果,而是返回了 No Results
。另一个问题是,这个 No Results
没有显示作为正常下拉低于 search box
。相反,它显示为 search box
下方的文本。
有什么想法吗?
add_new_schedule.html
<!-- jquery, jqueryui, bootstrap4 cdn are used in the headers -->
<input class="form-control" id="id_test" name="test"> <!-- this is the search box -->
jquery
$(document).ready(function () {
$('#id_test').autocomplete({
source: "",
minLength: 1,
autoFocus: true,
});
});
views.py
import json
...
...
def add_new_schedule(request):
if request.user.is_authenticated:
if request.GET and request.is_ajax():
q = request.GET.get('term')
print(q)
student_object = Student.objects.filter(first_name__startswith=q)
results = []
for r in student_object:
results.append(r.first_name)
data = json.dumps(results)
print(results)
else:
data = 'fail'
mimetype = 'application/json'
return render(request, 'static/html/add_new_schedule.html')
在这个阶段,当我输入 search box
时,print(results)
将打印出来自 Student
数据库的可能匹配列表。但是,此结果未反馈到 search box
...
urls.py
path('schedule/add-new-schedule/', views.add_new_schedule, name='add_new_schedule')
就目前而言,您只能 returning HTML 从您的角度来看。您需要做的是找到一种方法来 returning 您创建的 JSON data
。
您似乎已经在判断请求是否为 AJAX。所以你需要做的就是在那个分支的末尾 return 一些 JSON:
def add_new_schedule(request):
if request.user.is_authenticated:
if request.GET and request.is_ajax():
q = request.GET.get('term')
print(q)
student_object = Student.objects.filter(first_name__startswith=q)
results = []
for r in student_object:
results.append(r.first_name)
return JsonResponse(results, safe=False)
else:
return render(request, 'static/html/add_new_schedule.html')
JsonResponse 自动设置 mimetype 并编码为 JSON。 safe=False
允许您传递列表而不是字典。根据 Django 文档,传递列表(变成 Javascript 数组)最初被认为是不安全的,但 Javascript 在 2011 年解决了这个问题,所以现在不用担心可能没问题。
从技术上讲,您不需要最后一个 else
,您可以直接缩减 return render...
。这真是一种风格选择。
就错误消息在网页上的位置而言,您是否可能没有包括一些必需的 CSS 或碰巧有自己的 CSS 与相同的 class 名字?
我浏览了一些在线资源以利用 jquery
autocomplete
来填充我的搜索框。
但是,当我输入 search box
时,没有返回搜索结果,而是返回了 No Results
。另一个问题是,这个 No Results
没有显示作为正常下拉低于 search box
。相反,它显示为 search box
下方的文本。
有什么想法吗?
add_new_schedule.html
<!-- jquery, jqueryui, bootstrap4 cdn are used in the headers -->
<input class="form-control" id="id_test" name="test"> <!-- this is the search box -->
jquery
$(document).ready(function () {
$('#id_test').autocomplete({
source: "",
minLength: 1,
autoFocus: true,
});
});
views.py
import json
...
...
def add_new_schedule(request):
if request.user.is_authenticated:
if request.GET and request.is_ajax():
q = request.GET.get('term')
print(q)
student_object = Student.objects.filter(first_name__startswith=q)
results = []
for r in student_object:
results.append(r.first_name)
data = json.dumps(results)
print(results)
else:
data = 'fail'
mimetype = 'application/json'
return render(request, 'static/html/add_new_schedule.html')
在这个阶段,当我输入 search box
时,print(results)
将打印出来自 Student
数据库的可能匹配列表。但是,此结果未反馈到 search box
...
urls.py
path('schedule/add-new-schedule/', views.add_new_schedule, name='add_new_schedule')
就目前而言,您只能 returning HTML 从您的角度来看。您需要做的是找到一种方法来 returning 您创建的 JSON data
。
您似乎已经在判断请求是否为 AJAX。所以你需要做的就是在那个分支的末尾 return 一些 JSON:
def add_new_schedule(request):
if request.user.is_authenticated:
if request.GET and request.is_ajax():
q = request.GET.get('term')
print(q)
student_object = Student.objects.filter(first_name__startswith=q)
results = []
for r in student_object:
results.append(r.first_name)
return JsonResponse(results, safe=False)
else:
return render(request, 'static/html/add_new_schedule.html')
JsonResponse 自动设置 mimetype 并编码为 JSON。 safe=False
允许您传递列表而不是字典。根据 Django 文档,传递列表(变成 Javascript 数组)最初被认为是不安全的,但 Javascript 在 2011 年解决了这个问题,所以现在不用担心可能没问题。
从技术上讲,您不需要最后一个 else
,您可以直接缩减 return render...
。这真是一种风格选择。
就错误消息在网页上的位置而言,您是否可能没有包括一些必需的 CSS 或碰巧有自己的 CSS 与相同的 class 名字?