如何自动填写搜索表格？

问题内容：

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

问题答案：

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：将引导程序预输入/自动完成代码加载到您的页面中。我继承的项目已经在使用引导程序2，因此该代码已经存在。因此，在您的模板的开头部分（这可能会根据静态文件的目录结构而有所不同）：

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

我认为这就是一切。

如何自动填写搜索表格？

微信关注