Auto-complete search box in python using ajax

Question

Here is my code:

model.py

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

I have this code and I am do searching submitting the button of search box. but now I want to directly display database data when I click on search box and write some latter using Ajax.

Thanks.

Answer 1

You can do this with jquery-autocomplete-light:

1. Get jquery-autocomplete-light's autocomplete.js , ensure it's loaded in the HTML page, see django on staticfiles if you're not fluent with that already, if you're still confused, try surviving staticfiles howto

2. Create a view for inside the autocomplete box, example

3. Configure autocomplete.js with a script tag in your HTML page, example

That's used in ilstravaillentpourvous.fr in the top right search box, because this website is opensource, you can also inspect it : autocomplete.js configuration , autocomplete view , autocomplete template , autocomplete url .