Django不响应Ajax自动完成

Question

我搜索了“ bi”一词，该词应返回带有初始“ bi ...”的用户名，但未显示任何内容，没有下拉列表这是我的代码。

search.html

<html>
<div class="ui-widget">
  <label for="search4">search4: </label>
  <input id="search4">
</div>

<script type="text/javascript">
$(function(){
  $("#search4").autocomplete({
    source: '/rating/searchresult/',
    minLength: 2,
  });
});
</script>
</html>

url.py

url(r'^searchresult/', 'rating.views.search_images'),

views.py

def search_images(request):
    if request.is_ajax():
        s = request.GET.get("term", '')
        search_result = UploadImage.objects.filter(user__username__icontains = s )[:20]
        search = []
        for result in search_result:
            json_d = {}
            json_d['id'] = result.id
            json_d['name'] = result
            json_d['value'] = result
            search.append(json_d)
        data = m_json.dumps(search)
    else:
        data = 'error'
    mimetype = 'application/json'
    return HttpResponse(data, mimetype)

如果我搜索一个值，而该术语在URl中传递，则Ajax不会响应并且在下拉列表中不返回任何内容

[04/Aug/2016 08:48:46] "GET /rating/searchresult/?term=bi HTTP/1.1" 200 2661

我不明白Ajax或Django的问题在哪里， 我的内容类型是文本html，请参见此处

Answer 1

好吧，从技术上来说，您做错了所有事情。

autocomplete的source属性需要输入字段中要作为自动完成选项提供给用户的字符串或数据数组。

现在，您要做的就是简单地在autocomplete source中的views.py中提供与特定视图类或方法相对应的url ，而实际上您需要做的就是通过点击该url来获得ajax响应，那么您将从对应于该网址的类/方法中获得所需的响应。

现在，您将把此response给autocomplete源

在这里查看autocomplete source的工作原理-> http://api.jqueryui.com/autocomplete/#option-source

以及ajax的官方文档-> http://api.jquery.com/jquery.ajax/

$.get() -> https://api.jquery.com/jquery.get/的文档

因此，您的JavaScript文件如下所示：

$(document).on('ready', function(){
      populateSearchFieldList();
      // all other code according to your needs

});   

function populateSearchFieldList() {

    var url = "/rating/searchresult/";
    $.get(url, function(response) {

            // console.log("Success..!!");
            console.log(response);

           // now in views.py, you've returned a list in which every 
           // object has an id, name and value but you
           // want only the names in your autocomplete. So for that, first
           // you'll have to create a list of just the names and then feed
           // that list to the source of autocomplete. Like this

           var searchFieldOptions = [];
           var i = 0;

           $.each(response,function(){
                searchFieldOptions.push(response[i].name);
                i++;
           });

           // and now make the source of autocomplete as 
           // searchFieldOptions like this

           $(function(){
                $("#search4").autocomplete({
                    source: searchFieldOptions,
                    minLength: 2,
                });
            });               

       });
}

现在，如果它成功运行，那么您将在success函数中收到的response拥有所需的数据。 现在，您可以将此response （如果只是一个列表）用作autocomplete的source ，或者可以根据您的要求进一步修改此response并形成所需内容的array 。