Django-autocomplete-light设置起来很棘手,我认为使用其他自动完成功能更容易。
这是我如何使用Bootstrap 2进行工作的方式。(还有Bootstrap
3兼容的库,其配置或多或少是相同的https://github.com/bassjobsen/Bootstrap-3-Typeahead)。
您需要一些共同的东西。
1:创建一个将处理自动完成请求并返回建议的视图。所以在views.py中
def book_autocomplete(request, **kwargs): term = request.GET.__getitem__('query') books = [str(book) for book in book.objects.filter(Q(title__icontains=q) | Q(description__icontains=q))] return HttpResponse(json.dumps(books))并在urls.py中添加一个条目:
url(r'^autocomplete/book_autocomplete/' , booking.ebsadmin.book_autocomplete , name='book_autocomplete'),
2:将引导程序预输入/自动完成代码加载到您的页面中。我继承的项目已经在使用引导程序2,因此该代码已经存在。因此,在您的模板的开头部分(这可能会根据静态文件的目录结构而有所不同):
<script type="text/javascript" src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js"></script><link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}bootstrap/css/bootstrap.min.css" />3:将bootstrap typeahead /
autcomplete连接到视图。我创建了一个文件book_autocomplete.js,并将其添加到我的静态文件文件夹中。这告诉它将自动完成功能附加到具有id
book-search的元素上(您将必须在表单上提供搜索框,并且id等于在此使用的“#book-
search”。有关操作方法的示例这在您的表单定义中https://stackoverflow.com/a/5827671/686016):
book_search_typeahead.js
$(document).ready(function() { $('#book-search').typeahead({source: function (query, process) { return $.getJSON( '/autocomplete/book_autocomplete/', // this is the url for the view we created in step 1 { query : query }, function (data) { console.log(data) ; return process(data); }); }}); });回到您的模板并添加以下行以加载我们刚刚创建的javascript:
<script type='text/javascript' src='{{ STATIC_URL }}book_search_typeahead.js' ></script>我认为这就是一切。



