JQuery 自动完成不会呈现结果

Question

正在尝试下拉！

型号：

class Student(models.Model):
    name = models.CharField(max_length=100)
    student_id = models.IntegerField()
    grade = models.IntegerField()

查看：

def student_autocomplete(request):
    query = request.GET.get('term')
    if query:
        data = (Student.objects.filter(name__startswith = query).values('name', 'student_id', 'grade'))
        return JsonResponse(list(data), safe=False)
    else:
        data='blank'
        return JsonResponse(data)

JQuery:

$(document).ready(function() {
        console.log('ready!');
    });

    $("#student_auto").autocomplete({
    source: "{% url 'student-autocomplete' %}",
    minLength: 2,
    autoFocus: true,
    select: function (event, ui) {
        $('#student_auto').val( ui.item.name );
        console.log(ui, event);
    }
    });
    $("#student_auto").removeAttr("autocomplete").attr("autocomplete", "on");

我手动调用自动完成时可以看到数据 url 看起来不错，但结果只显示为空框。

Answer 1

您需要一个成功回调函数，然后将每个列表条目映射到您的 select，如下所示：

     $.ajax({
            url: url,
            type: "GET",
            dataType: "json",
            data: { term: request.term },
            success: function (data) {
                response($.map(data, function (i) {
                    return { label: i, value: i };
                }))
            }
        })

Answer 2

别傻了 - 阅读 docs！

An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

这导致：

def student_autocomplete(request):
    query = request.GET.get('term')
    results = []
    if query:
        data = Student.objects.filter(name__startswith = query).values()
        for d in data:
            d_json = {}
            d_json['value'] = d['name']
            d_json['id'] = d['student_id']
            results.append(d_json)
        return JsonResponse(results, safe=False)
    else:
        data ='blank'
    return JsonResponse(data)

对于卡住的其他人：您想要自动完成的值 应该标记为值 。您可以通过 ui.item.

调用任何其他值

JQuery 自动完成不会呈现结果

JQuery Autocomplete Won't Render Results

django

jquery

jquery-ui-autocomplete