django jquery 自动完成搜索框不显示结果

Question

我浏览了一些在线资源以利用 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')

Answer 1

就目前而言，您只能 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 名字？

django jquery 自动完成搜索框不显示结果

django jquery autocomplete search box not displaying results

jquery

django

jquery-ui-autocomplete