在Django项目中使用typeahead.js

Question

I have a django project with a movie database and would like my search box to simply implement the autocomplete function that typeahead.js gives me. I am using this because of its template capabilities and because it fits in well with Bootstrap which is what I'm using for the styling.

urls.py

url(r'^get_movie/$', views.get_movie, name = 'get_movie')

views.py

def get_movie(request):
   results = []
   q = request.GET['q']
   movies = Movie.objects.filter(title__icontains = q)
   results = [ {movie.id: movie.name} for movie in movies ]
   data = json.dumps(results)
   return HttpResponse(data, content_type = 'application/json')

HTML search box

<input id="searchBox" type="text" class="form-control input-lg typeahead" placeholder="Search a movie..." name="q"></input>

Obviously I have jQuery, Bootstrap and typeahead.js included.

Above is all the necessary code except for the javascript that implements the typeahead.js

This is an example from the official website but I don't know what modifications I would need to apply to be able to dynamically obtain the results from my database and show them in the autocomplete list:

<script type="text/javascript">
  $('.typeahead').typeahead(null, {
    name: 'best-pictures',
    display: 'value',
    source: bestPictures,
    templates: {
      empty: [
        '<div class="empty-message">',
          'unable to find any Best Picture winners that match the current query',
        '</div>'
      ].join('\n'),
      suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>')
    }
  });
</script>

Hint: I'm pretty sure I need to use Ajax to obtain the "source" list but have tried and can't manage to do it.

Answer 1

I would suggest using the "remote" version. Try this:

urls.py:

url(r'^get_movie/$', SearchListView.as_view(), name='get_movie'),
url(r'^ajaxsearch/$', views.search_ajax, name='search_ajax')

views.py:

from django.db.models import Q
from django.views.generic.list import ListView

class SearchListView(ListView):
    model = Movie
    template_name = 'some_template.html'

    def get_context_data(self, *args, **kwargs):
        context = super(SearchListView, self).get_context_data(*args, **kwargs)
        context['query'] = self.request.GET.get('q')
        return context

    def get_queryset(self, *args, **kwargs):
        movie_qs = super(SearchListView, self).get_queryset(*args, **kwargs)
        query = self.request.GET.get('q')

        if query:
            user_qs = self.model.objects.filter(
                Q(title__icontains=query)
                )
        return movie_qs


@require_http_methods(['GET'])
def search_ajax(request):
    q = request.GET.get('q')
    data = {}

    if q:
        titles = Movie.objects.filter(title__icontains=q)
        data = [{'title': title} for title in titles]
    return JsonResponse(data, safe=False)

search box:

<div id="remote" class="twitter-typeahead">
    <input type="text" class="form-control input-lg typeahead tt-input" name="q" placeholder="Search a movie..." />
</div>

javascript:

var titlesDisplay = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        url: "{% url 'search_ajax' %}",
        replace: function(url, query) {
            return url + "?q=" + query;
        }
    }
});
$('#remote .typeahead').typeahead({
    minLength: 1,
    highlight: true},
    {name: 'titles-display',
    display: 'title',
    source: titlesDisplay,
});

Answer 2

We ended up using this solution a friend gave to us and it works well:

<script type="text/javascript">
  $(document).ready(function(){
    var queryMovies = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        limit: 20,
        rateLimitWait: 800,
        remote: {url:'/get_movie/?q=%QUERY', wildcard: '%QUERY'}
    });

    queryMovies.initialize();

    $('#remote .typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 2,
    },
    {
        name: 'queryMovies',
        display: 'value',
        source: queryMovies.ttAdapter(),
        templates: {
            empty: [
            '<div class="empty-message">',
            'No hay resultados con la consulta',
            '</div>'
            ].join('\n'),
            suggestion: function(data) {
              var url = "{% url 'movie' '00000' %}"
              url = url.replace('00000', data.id);
              return '<div><p><a href="' + url + '">' + data.title + '</a></p></div>';
            }
        }
    });
  });
</script>