如何自动完成搜索表单? [英] How to autocomplete a search form?

问题描述

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

I have a search form and it works fine. Now I would like my search form autocomplete.I tried using django autocomplete light but I have a problem implementing it.

是否可以使用我现有的代码，添加 JavaScript 并使其工作?我试着自己做，但我撞到了墙.

Is it possible to use my existing code, add JavaScript and make it work? I tried to do it myself but I came to a wall.

如果有人能帮我解决这个问题，给我一个提示或链接，我将不胜感激.

I would really appreciate if someone could help me with this, give me a hint or a link for a working demo or tutorial.

这是我当前的代码.感谢您抽出宝贵时间.

This is my current code. Thanks for your time.

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'),
)

搜索.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>

推荐答案

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://stackoverflow.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://stackoverflow.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>

我认为这就是一切.

这篇关于如何自动完成搜索表单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！