如何自动完成搜索表单？

Posted 2023-02-24

【中文标题】如何自动完成搜索表单？

【英文标题】：How to autocomplete a search form?

【发布时间】：2016-06-02 18:31:31

【问题描述】：

我有一个搜索表单，它工作正常。现在我想要我的搜索表单自动完成。我尝试使用 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'),
)

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

【问题讨论】：

从here你可以在你的代码中添加一个jQuery，从here你可以使用jQuery添加自动完成

【参考方案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 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：将引导输入/自动完成连接到您的视图。 我创建了一个 book_autocomplete.js 文件，并将其添加到我的静态文件夹中。这告诉它使用 id book-search 将自动完成附加到元素（您必须在表单上提供搜索框，并且 id 与我在这里使用的 '#book-search' 等效。有关如何做的示例这在你的表单定义中https://***.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>

我认为这就是一切。

【参考方案2】：

@wobbily_col 答案显然有效，但通常您希望避免使用关系数据库来创建自动完成结果。我制作了一个运行快速且易于使用的自动完成库。但它所做的只是将文本结果返回给您。您可以向其提供数据并在您的 API 中做出响应。结帐：https://github.com/wearefair/fast-autocomplete 这里解释一下它是如何工作的：http://zepworks.com/posts/you-autocomplete-me/