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

Question

我在从数据库查询自动完成输入字段时遇到问题。如果我在输入字段中写一些东西，什么也不会发生。如果我转到例如 127.0.0.0.1:8000/guess_booknames/?q=San it return 返回一个页面 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()

query.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;' ></strong>" );
  },
  });
  })
  </script>

</body>
</html>

Answer 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;' ></strong>" );
                }
            });
       });
    </script>

</body>
</html>

请注意 typeahead 的 <script src 不同，我已经更改了您的 javascript 的某些部分。

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

Django autocomplete from query db

django

jquery

autocomplete

typeahead.js