Making a global navigation autocomplete¶
This guide demonstrates how to make a global navigation autocomplete like on Facebook.
Note that there are many ways to implement such a feature, we’re just describing a simple one.
A simple view¶
As we’re just going to use autocomplete.js for this, we only need a view to render the autocomplete. For example:
from django import shortcuts
from django.db.models import Q
from autocomplete_light.example_apps.music.models import Artist, Genre
def navigation_autocomplete(request,
template_name='navigation_autocomplete/autocomplete.html'):
q = request.GET.get('q', '')
queries = {}
queries['artists'] = Artist.objects.filter(
Q(name__icontains=q) |
Q(genre__name__icontains=q)
).distinct()[:6]
queries['genres'] = Genre.objects.filter(name__icontains=q)[:6]
return shortcuts.render(request, template_name, queries)
Along with a trivial template for navigation_autocomplete/autocomplete.html
would work:
<span class="separator">Artists</span>
{% for artist in artists %}
<a class="block choice" href="{{ artist.get_absolute_url }">{{ artist }}</a>
{% endfor %}
<span class="separator">Genres</span>
{% for genre in genre %}
<a class="block choice" href="{{ genre.get_absolute_url }}">{{ genre }}</a>
{% endfor %}
A basic autocomplete configuration¶
That’s a pretty basic usage of autocomplete.js, concepts are detailed in Using $.yourlabsAutocomplete to create a navigation autocomplete, this is what it looks like:
// Change #yourInput by a selector that matches the input you want to use
// for the navigation autocomplete.
$('#yourInput').yourlabsAutocomplete({
// Url of the view you just created
url: '{% url "your_autocomplete_url" %}',
// With keyboard, we should iterate around <a> tags in the autocomplete
choiceSelector: 'a',
}).input.bind('selectChoice', function(e, choice, autocomplete) {
// When a choice is selected, open it. Note: this is not needed for
// mouse click on the links of course, but this is necessary for keyboard
// selection.
window.location.href = choice.attr('href');
});