Django,jQuery和自动完成

Question

经过一些广泛的研究(谷歌搜索),我找不到关于如何使用Django和jQuery设置自动完成的当前教程.似乎有各种各样的插件,似乎没有关于使用或何时使用的一致性或标准.

我不是Django或jQuery的专家,但需要一个记录良好且使用起来相当简单的自动完成解决方案.

建议？

Answer 1

如果你想从你的django模型中搜索,那么像:

from django.utils import simplejson
    def autocompleteModel(request):
    search_qs = ModelName.objects.filter(name__startswith=request.REQUEST['search'])
    results = []
    for r in search_qs:
        results.append(r.name)
    resp = request.REQUEST['callback'] + '(' + simplejson.dumps(result) + ');'
    return HttpResponse(resp, content_type='application/json')

对于jQuery自动完成和调用:

function searchOpen() {
    var search = $('#txtSearch').val()
    var data = {
        search: search
    };
    $.ajax({
        url: '/search.json',
        data: data,
        dataType: 'jsonp',
        jsonp: 'callback',
        jsonpCallback: 'searchResult'
    });
}


function searchResult(data) {
    $( "#txtSearch" ).autocomplete ({
        source: data
    });
}

最后,在输入表单上连接所有内容将具有以下内容:

<input type="text" name="search" id="txtSearch" onkeyup="searchOpen()" />

注意,除了库存jQuery之外,这也使用Jquery UI.

Answer 2

同时,出现了一个很好的教程.

autocomplete 为你做的一切,你所要做的就是以下几点:

JS

$(function() {
  $("#search-field").autocomplete({
    source: "/ajax_calls/myFunction",
    minLength: 2,
  });
});

urls.py

url(r'^ajax_calls/myFunction/', 'my_app.views.handler_function'),

views.py

def get_drugs(request):

    if request.is_ajax():
        .....
        data = json.dumps(results)
    else:
        data = 'fail'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)

消息来源: http ://flaviusim.com/blog/AJAX-Autocomplete-Search-with-Django-and-jQuery/

Answer 3

假设您想<input type="text" id="id_input">使用用户的用户名在某些输入字段（如）上设置自动完成功能。这是我这样做的方式：

网址.py

首先，添加一个将由 AJAX 调用使用的 url。

url(r'^ajax/autocomplete/$', views.autocomplete, name='ajax_autocomplete')

视图.py

然后设置一个视图从数据库中检索信息（即用户名，在这种情况下）

from django.http import JsonResponse

def autocomplete(request):
    if request.is_ajax():
        username_query = request.GET.get('username_query', '')
        usernames = (User.objects
                     .filter(username__startswith=username_query)
                     .values_list('username', flat=True))
        data = {
            'usernames': usernames,
        }
        return JsonResponse(data)

JavaScript

最后，您需要创建一个 JavaScript 函数，该函数会在您每次按下（并释放）键时进入数据库并返回与输入字段值匹配的用户名。为此，我们将使用Ajax、JQuery和JQuery-ui的自动完成功能

jQuery(function() {
    $("#id_input").on('keyup', function(){
        let value = $(this).val();
        $.ajax({
            url: "{% url 'ajax_autocomplete' %}",
            data: {
              'username_query': value 
            },
            dataType: 'json',
            success: function (data) {
                let usernames = data.usernames;
                $("#id_input").autocomplete({
                source: usernames,
                minLength: 3 
                });       
            }
        });        
    });
  });

就是这样！有关更多信息，您可以查看本教程

Answer 4

我是 django-autocomplete 的忠实粉丝：https://bitbucket.org/tyrion/django-autocomplete/wiki/Home。它具有良好的即插即用功能，并且很容易与您自己的应用程序集成，无需太多额外的编码。