Django-autocomplete-light 设置起来很棘手，在我看来它更容易使用其他自动完成.

Django-autocomplete-light is tricky to set up and in my opinion its easier using other autocompletes.

这是我使用 bootstrap 2 让它工作的方式.(还有一个与 bootstrap 3 兼容的库，配置或多或少相同 https://github.com/bassjobsen/Bootstrap-3-Typeahead).

Here is how I got it working using bootstrap 2. (There is a bootstrap 3 compatible library as well, and the configuration is more or less the same https://github.com/bassjobsen/Bootstrap-3-Typeahead).

你需要一些东西才能协同工作.

You need a few things to work together.

1:创建一个视图来处理自动完成请求并返回建议.所以在views.py中

1: Create a view that will process the autocomplete request and return suggestions. so in 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 中添加一个条目:

And in urls.py add an entry:

url(r'^autocomplete/book_autocomplete/' , booking.ebsadmin.book_autocomplete , name='book_autocomplete'),

2:将引导程序预先输入/自动完成代码加载到您的页面中.我继承的项目已经在使用 bootstrap 2，所以这段代码已经在那里了.因此，在 head 部分的模板中(这可能会因静态文件的目录结构而异):

2: Load the bootstrap typeahead/autocomplete code into your page. The project I inherited was already using bootstrap 2, so this code was already there. So in your template in the head section (this will probably differ depending on the the directory structure of your static files):

<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:将引导程序预先输入/自动完成连接到您的视图.我创建了一个文件 book_autocomplete.js，并将其添加到我的静态文件夹中.这告诉它使用 id book-search 将自动完成附加到元素上(您必须在表单上提供搜索框和 id 等同于我在这里使用的#book-search".关于如何做的示例这在您的表单定义中https://***.com/a/5827671/686016):

3: Connect the bootstrap typeahead/autcomplete to your view. I created a file book_autocomplete.js, and added it to my static files folder. This tells it to attach the autocomplete to the element with id book-search (you will have to give the search box on your form and id equivalent to the '#book-search' that I have used here. An example on how to do this in your form definition https://***.com/a/5827671/686016):

book_search_typeahead.js

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:

back to your template and add this line to load the javascript that we just created:

  <script type='text/javascript' src='{{ STATIC_URL }}book_search_typeahead.js' ></script>

我认为这就是一切.