Автозаполнение JQuery не даст результатов - PullRequest
Новая
       11

Автозаполнение JQuery не даст результатов

0 голосов
/ 28 августа 2018

Пытаясь получить выпадающий список!

Модель: 

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 автозаполнения, и это выглядит красиво, но результаты отображаются только в виде пустых полей.

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Не будь дурочкой - прочитайте документы !

Массив объектов со свойствами метки и значения: [{label: "Choice1", значение: "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.

0 голосов
/ 28 августа 2018

Вам нужна функция обратного вызова, затем сопоставьте каждую запись списка с вашим выбором следующим образом: 

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