Question

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

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

如果有人能帮我解决这个问题，请给我一个提示或链接以获得有效的演示或教程，我将非常感激。

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

views.py

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

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＆＃39;有关如何在表单定义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/

如何自动填写搜索表单？

2 个答案: