python - 如何自动完成搜索表单？

Question

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

是否可以使用我现有的代码，添加 JavaScript 并使其工作？我尝试自己做，但遇到了困难。

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

这是我当前的代码。感谢您抽出时间。

View .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))

url.py

urlpatterns = patterns('', 
    url(r'^search/$','papers.views.search', name='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:创建一个 View 来处理自动完成请求并返回建议。所以在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 提前输入/自动完成代码加载到您的页面中。我继承的项目已经在使用 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 连接到您的 View 。我创建了一个文件 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>

我认为这就是一切。