使用Ajax在python中自動完成搜索框

Question

這是我的代碼：

模型

class Bookmark(models.Model):

url = models.URLField()
title = models.CharField('title', max_length=255)
description = models.TextField('description', blank=True)
is_public = models.BooleanField('public', default=True)
date_created = models.DateTimeField('date created')
date_updated = models.DateTimeField('date updated')
owner = models.ForeignKey(User, verbose_name='owner', related_name='bookmarks')
tags = models.ManyToManyField(Tag, blank=True)
views = models.IntegerField(default=0)
objects = models.Manager()
public = PublicBookmarkManager()

class Meta:
    verbose_name = 'bookmark'
    verbose_name_plural = 'bookmarks'
    ordering = ['-date_created']

def __str__(self):
    return '%s (%s)' % (self.title, self.url)

def save(self, *args, **kwargs):
    if not self.id:
        self.date_created = now()
    self.date_updated = now()
    super(Bookmark, self).save(*args, **kwargs)`

views.py

def bookmark_search(request):

query_string = ''
found_entries = None
if ('q' in request.GET) and request.GET['q'].strip():

    query_string = request.GET['q']

    entry_query = get_query(query_string, ['id', 'url', 'title'])

    found_entries = Bookmark.objects.filter(entry_query).order_by('-date_created')
context = { 'query_string': query_string, 'found_entries': found_entries }
return render(request,'marcador/bookmark_search.html',context)`

urls.py

urlpatterns = [

url(r'^search/?$', 'marcador.views.bookmark_search', name='marcador_bookmark_search'), ]

bookmark_search.html

{% block search %}
{% url "marcador_bookmark_search" as action_url %}
<form class="navbar-form navbar-right search" role="form" method="get" action="{{ action_url }}" accept-charset="utf-8">

<div class="form-group">
<label for="id_q"></label>
<input type="text" id="id_q" placeholder="Search..." class="form-control" name="q">
<input type="submit" class="btn btn-default" value="GO"/>
</div>
</form>
{% endblock %}

我有這段代碼，我正在搜索提交搜索框的按鈕。 但是現在我想直接在單擊搜索框並使用Ajax編寫數據庫時直接顯示數據庫數據。

謝謝。

Answer 1

您可以使用jquery-autocomplete-light做到這一點：

1. 獲取jquery-autocomplete-light的autocomplete.js ，確保它已加載到HTML頁面中，如果您尚未熟練使用django ，請在staticfiles上查看django ，如果仍然感到困惑，請嘗試如何在staticfiles中存活

2. 在自動完成框內創建一個視圖， 例如

3. 在HTML頁面中使用腳本標簽配置autocomplete.js， 例如

ilstravaillentpourvous.fr用於右上角搜索框，因為該網站是開源的，所以您也可以檢查它 ： autocomplete.js配置 ， autocomplete視圖 ， autocomplete模板 ， autocomplete url 。