Jquery Django从查询数据库自动完成_Jquery_Django_Autocomplete_Typeahead.js

Jquery Django从查询数据库自动完成

jquery django autocomplete

Jquery Django从查询数据库自动完成,jquery,django,autocomplete,typeahead.js,Jquery,Django,Autocomplete,Typeahead.js,我无法从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.Ch

我无法从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)

URL.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>


$（文档）.ready（函数（$）{
$（“#已搜索的_项”）。请提前键入({
项目：12，
来源：功能（查询、流程）{
返回$.get（'/guess_booknames/'，{query:query}，函数（数据）{
返回过程（data.options）；
});
},
最小长度：3，
自动选择：false，
荧光灯：功能（项目）{
var regex=new RegExp（“（“+this.query+”）”，“gi”）；
返回项目。替换（regex，“$1”；
},
});
})

您使用的参数名称似乎不正确。在javascript部分，您使用的是

query

，而在视图中，您只使用

# { 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>


$（函数（）{
$（“#已搜索的_项”）。请提前键入({
最小长度：3，
推荐理由：没错
},
{
名称：'书籍'，
来源：函数（查询、同步结果、异步结果）{
$.get（'/guess_booknames/'，{q:query}，函数（数据）{
异步结果（data.options）；
});
},
自动选择：false，
荧光灯：功能（项目）{
var regex=new RegExp（“（“+this.query+”）”，“gi”）；
返回项目。替换（regex，“$1”；
}
});
});

请注意

hmmm，您是否从服务器获得200
响应？您可能需要记录数据的值，例如console.log（数据）并在浏览器控制台中检查。是200响应。我是jquery的新手，我需要把console.log（数据）；？你可以把它放在返回过程之前（data.options）行，然后使用chrome浏览器，在页面上单击鼠标右键，然后单击“检查”，然后转到“控制台”选项卡。完成，如果我写入输入，控制台中也不会显示消息field@lausent你可以点击上面我的答案中的向上箭头。对于“无结果”，如果len（ebook\u list\u bookname）==0:ebook\u list\u bookname.append（'no result'），则可以在json.dumps之前的视图中添加一个条件