Question

我在自动填充db查询的输入字段时遇到问题。如果我在输入字段中写东西没有任何反应。我没有从django提示或浏览器控制台收到任何错误，如果我去例如127.0.0.0.1：8000 / guess_booknames /？q = San它返回一个带有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;' >$1</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;' >$1</strong>" );
                }
            });
       });
    </script>

</body>
</html>

请注意，typeahead的<script src不同，我更改了您的部分JavaScript。

来自查询db

1 个答案: