Making a global navigation autocomplete
=======================================
This guide demonstrates how to make a global navigation autocomplete
like on http://betspire.com.
Create the view
---------------
The global navigation autocomplete is generated by a normal view, with
a normal template.
Then, you can just test it by openning /your/autocomplete/url/?q=someString
Only two things matter:
- you should be able to define a selector for your options. For example, your
autocomplete template could contain a list of divs with class "option", and
your selector would be '.option'.
- each option should contain an url of course, to redirect the user when he
selects a option
Actually, it's not totally true, you could do however you want, but that's a
simple way i've found.
Once this works, you can follow to the next step. For your inspiration, you may
also read the following example.
Example
~~~~~~~
Personnaly, I like to have an app called 'project_specific' where I can put my
project-specific, non-reusable, code. So in project_specific/autocomplete.py of
a project I have this::
from django import shortcuts
from django.db.models import Q
from art.models import Artist, Artwork
def autocomplete(request,
template_name='project_specific/autocomplete.html', extra_context=None):
q = request.GET['q'] # crash if q is not in the url
context = {
'q': q,
}
queries = {}
queries['artworks'] = Artwork.objects.filter(
name__icontains=q).distinct()[:3]
queries['artists'] = Artist.objects.filter(
Q(first_name__icontains=q)|Q(last_name__icontains=q)|Q(name__icontains=q)
).distinct()[:3]
# more ...
# install queries into the context
context.update(queries)
# mix options
options = 0
for query in queries.values():
options += len(query)
context['options'] = options
return shortcuts.render(request, template_name, context)
And in project_specific/autocomplete.html::
{% load i18n %}
{% load thumbnail %}
{% load url from future %}
{% load humanize %}