来自查询数据库的 Django 自动完成答案

【问题标题】：Django autocomplete from query db来自查询数据库的 Django 自动完成
【发布时间】：2017-10-08 02:48:06
【问题描述】：

我在从 db 查询中自动完成输入字段时遇到问题。如果我在输入字段中写一些东西，什么都不会发生。如果我转到例如 127.0.0.0.1:8000/guess_booknames/?q=San，我没有收到来自 django 提示符或浏览器控制台的任何错误，它返回一个包含 JSON 内容的页面，因此“def guess_booknames”效果很好.也许是 query.html 错了？

models.py：

class EbooksDBProfile(models.Model):

    bookname = models.CharField(max_length=200,blank=False,null=False)

urls.py:

url(r'^guess_booknames/$', guess_booknames,name='autocomplete book names'),

views.py：

def guess_booknames(request):
    if 'q' in request.GET:
        query = request.GET.get('q','')
        ebook_list_bookname=[]
        ebook_dict={}
        ebook_object=EbooksDBProfile.objects.all().filter(bookname__icontains=query)
        for p in ebook_object:
            ebook_list_bookname.append(p.bookname)

        ebook_dict['options']=ebook_list_bookname
        data=json.dumps(ebook_dict)
        return HttpResponse(data, content_type='application/json')
    return HttpResponse()

查询.html：

<!DOCTYPE html>
<html>
  <head>
     <script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"></script>
     <script type="text/javascript" src="//netsh.pp.ua/upwork-demo/1/js/typeahead.js"></script>
  </head>
<body>

  <input type="search" name="searched_item" id="searched_item" class="form-control" autocomplete="off" placeholder="Enter book name (eg. Head First Java)" style="max-width: 700px;width: 700px;color: threeddarkshadow;">

  <script>
  $(document).ready(function($) {
  $('#searched_item').typeahead({
      items:12,
        source: function (query, process) {
              return $.get('/guess_booknames/', { query: query }, function (data) {
                return process(data.options);
              });
            },
            minLength:3,
            autoSelect:false,

  highlighter: function (item) {
      var regex = new RegExp( '(' + this.query + ')', 'gi' );
      return item.replace( regex, "<strong style='color:green;' >$1</strong>" );
  },
  });
  })
  </script>

</body>
</html>

【问题讨论】：

标签： jquery django autocomplete typeahead.js

【解决方案1】：

您似乎使用了错误的参数名称。在您的 javascript 部分，您使用的是query，而在您看来，您只使用了q。

# { query: query } should just be { q: query }
return $.get('/guess_booknames/', { query: query }, function (data) {
                return process(data.options);
              });

更新： 我认为您使用的 typeahead 版本错误，如果您没问题，您可以使用最新版本。我让它在这个中工作：

<!DOCTYPE html>
<html>
  <head>
     <script type="text/javascript" src="//code.jquery.com/jquery-3.0.0.min.js"></script>
     <script type="text/javascript" src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.min.js"></script>
  </head>
<body>

    <input type="text" name="searched_item" id="searched_item"  placeholder="Enter book name (eg. Head First Java)" style="max-width: 700px;width: 700px;color: threeddarkshadow;">

    <script>
        $(function () {
            $('#searched_item').typeahead({
                minLength:3,
                highlight: true
            },
            {
                name: 'books',
                source: function (query, syncResults, asyncResults) {
                    $.get('/guess_booknames/', { q: query }, function (data) {
                        asyncResults(data.options);
                    });
                },
                autoSelect:false,
                highlighter: function (item) {
                    var regex = new RegExp( '(' + this.query + ')', 'gi' );
                    return item.replace( regex, "<strong style='color:green;' >$1</strong>" );
                }
            });
       });
    </script>

</body>
</html>

请注意，用于预先输入的 <script src 是不同的，我已经更改了您的 javascript 的某些部分。

【讨论】：

hmmm，你收到来自服务器的200 响应了吗？您可能想要记录数据的值是多少，例如 console.log(data); 并在浏览器控制台中检查。
是 200 响应。我是 jquery 的新手，我需要将 console.log(data);?
您可以将其放在return process(data.options); 行之前，然后使用chrome浏览器，右键单击您的页面，然后单击检查，然后转到控制台选项卡。
完成，如果我在输入字段中写入，控制台中也不会显示消息
@lausent 您可以单击我上面答案中的向上箭头。对于“无结果”，您可以在 json.dumps if len(ebook_list_bookname) == 0: ebook_list_bookname.append('No result') 之前在视图中添加条件