如何自动填写搜索表单？

Question

我有一个搜索表单，它工作正常。现在我想我的搜索表单自动完成。我尝试使用django自动完成灯，但我有一个实现它的问题。

是否可以使用我现有的代码，添加JavaScript并使其工作？我试着自己做，但我来到了一堵墙。

我真的很感激，如果有人可以帮助我，给我一个工作演示或教程的提示或链接。

这是我目前的代码。谢谢你的时间。

views.朋友

def search(request):
    if 'q' in request.GET and request.GET['q']:
        q = request.GET['q']
        search_list = Book.objects.filter(
    Q(title__icontains=q) | Q(description__icontains=q))
        return render_to_response('books/search_results.html', {'search_list': search_list, 'query': q}, context_instance=RequestContext(request))
    else:
        return render_to_response('books/please_submit.html', {}, context_instance=RequestContext(request))

URLs.朋友

urlpatterns = patterns('', 
    url(r'^search/$','papers.views.search', name='search'),
)

search.html

    <form method='get' action='/search/'>
        <input type='text' name='q'  class="btn btn-theme btn-sm btn-min-block biggerForm"> 
        <input type='submit' value='Search'  class="btn btn-theme btn-sm btn-min-block">
    </form>

Answer 1

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：将bootstrap typeahead / autocomplete代码加载到页面中。我继承的项目已经使用了bootstrap 2，所以这段代码已经存在了。所以在head部分的模板中（根据静态文件的目录结构，这可能会有所不同）：

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

我认为这就是一切。

Answer 2

@wobbily_col答案显然有效但通常你想避免命中关系数据库来创建自动完成结果。我已经创建了一个自动完成库，它运行速度快，易于使用。但它所做的就是给你回复文字结果。您可以在API中提供数据并做出响应。结帐：https://github.com/wearefair/fast-autocomplete以下是对其工作原理的解释：http://zepworks.com/posts/you-autocomplete-me/