JQuery Tokenfield с Джанго не работает

Question

Я пытаюсь включить поле поиска в регистрационную форму Django.Я хотел бы использовать поле токена начальной загрузки, которое ищет в модели django возможные совпадения со строкой поиска.Я боролся с этим уже пару дней.Вот мой код ниже.

<div class="form-inline" id="keywords_div">
                                            {% csrf_token %}
                                            <input type="text" name="search_text" class="form-control" id="tokenfield" placeholder="Enter keyword" style="width: 50%" />
                                            <button type="button" id="addKeyword-btn" class="btn btn-primary">Add</button>


My JQuery code.

 
 $(function(){
      //auto complete ajax code.
    $('#tokenfield').tokenfield({
          autocomplete: {
            //source:['red','blue','green','yellow','violet','brown','purple','black','white'],
            delay: 100
          },
          showAutocompleteOnFocus: true,
    }).keyup(function(){
        alert('key pressed');
        $.ajax({
            url: "/user_account/auto_complete_search/",
            type: 'POST',
            data: {
                'search_text': $('#tokenfield').val(),
                'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
            },
            success: function(data){
                console.log(data)

            },
            dataType: 'text'
        });
    });
});
 
 });
 

Django View

#This is the function that handle the auto complete search functionality.
def autocomplete_search_view(request):
    if request.method == 'POST':
        search_text = request.POST['search_text']
    else:
        search_text = ''

    keywords = Keywords.objects.filter(keyword__icontains=search_text)
    #data = serializers.serialize('json', keywords, fields=('keyword'))

    return HttpResponse('Query completed', content_type='application/text')

user_account / urls.py

url(r'^auto_complete_search/$', autocomplete_search_view, name='autocomplete_search'),

Ошибка браузера.

Что я здесь не так делаю?

Answer 1

После очень долгого времени поиска ответа я в конце концов понял его правильно.см. код ниже.Я пытаюсь выяснить, как сделать выпадающее меню прокручиваемым, но код ниже делает именно то, что я хотел.

    $('#tokenfield').tokenfield({
        autocomplete: {
            source: function(request, response){
                        if(request.term.length >= 5){
                             $.ajax({
                                url: "/user_account/auto_complete_search/",
                                type: 'POST',
                                data: {
                                    'search_text': request.term,
                                    'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
                                },
                                success: function(data){
                                    if(data != ""){
                                        var dataArr = [];
                                        $.each(data, function(i, jsonObj){
                                            dataArr[i] = jsonObj.fields.keyword;
                                        });
                                        response(dataArr);
                                    }
                                    else{
                                        response([]);
                                    }
                                },
                                dataType: 'json'
                            });
                        }
                        else{
                            response([]);
                        }
                    },
            delay: 300,
            },
            showAutocompleteOnFocus: true
        });

Вид Джанго.

#This is the function that handle the auto complete search functionality.
def autocomplete_search_view(request):
    if request.method == 'POST':
        search_text = request.POST['search_text']
    else:
        search_text = ''
        return HttpResponse([{}], content_type='application/json')

    keywords = Keywords.objects.filter(keyword__icontains=search_text)
    data = serializers.serialize('json', keywords, fields=('keyword'))

    return HttpResponse(data, content_type='application/json')

HTML-код остается прежним.Надеюсь, это поможет кому-то в будущем.