add autocomplete to plone popup

pfwb_thesaurus/templates/thesaurus/plone_popup.html

@@ -4,10 +4,11 @@
 
 <script>
 function thesaurus_popup_init() {
-  $('#term-content a, #thesaurus-terms a').unbind('click').click(function() {
+  $('#term-content a, #thesaurus-terms a, #thesaurus-quick-search a').unbind('click').click(function() {
     $.ajax({
       url: $(this).attr('href'),
       success: function(data, status) {
+        $('#thesaurus-quick-search').hide();
         $('#entry-points').hide();
         $('#term-content').empty();
         $(data).find('table').appendTo($('#term-content'));
@@ -30,6 +31,29 @@ function thesaurus_popup_init() {
     return false;
   });
 }
+$('.pb-ajax').click(function() {
+  var $search_result_ul = $('#thesaurus-quick-search ul');
+  $search_result_ul.empty().hide();
+});
+$('#thesaurus-quick-search input').keyup(function() {
+  var q = $(this).val();
+  var $search_result_ul = $('#thesaurus-quick-search ul');
+  $search_result_ul.empty();
+  if (q.length == 0) {
+    $search_result.hide();
+    return;
+  }
+  $.getJSON($(this).data('autocomplete-json'), {'q': q},
+     function(response) {
+       $search_result_ul.empty().show();
+       $(response.data).each(function(idx, elem) {
+         var new_elem = '<li><a href="' + elem.url + '">' + elem.title + '</a></li>';
+         $(new_elem).appendTo($search_result_ul);
+       });
+       thesaurus_popup_init();
+     });
+});
+
 thesaurus_popup_init();
 </script>
 

pfwb_thesaurus/templates/thesaurus/term_list.html

@@ -1,6 +1,12 @@
 {% extends "base.html" %}
 
 {% block content %}
+<div id="thesaurus-quick-search">
+<h2>Recherche rapide</h2>
+<input type="text" name="thesaurus-quick-search" data-autocomplete-json="{% url 'term-search-json' %}"/>
+<div class="thesaurus-search-results"><ul></ul></div>
+</div>
+
 <div id="entry-points">
 <h2>Points d'entrée</h2>
 

pfwb_thesaurus/views.py

@@ -17,6 +17,7 @@
 import json
 
 from django.conf import settings
+from django.core.urlresolvers import reverse
 from django.http import HttpResponse
 from django.views.generic import DetailView, ListView
 
@@ -54,8 +55,8 @@ def term_search_json(request):
     sqs.load_all()
 
     result = []
-    for item in sqs:
-        result.append({'title': item.term, 'id': item.id})
+    for item in sqs[:15]:
+        result.append({'title': item.term, 'url': reverse('term', kwargs={'pk': item.pk}), 'id': item.pk})
 
     response = HttpResponse(content_type='application/json')
     json.dump({'data': result}, response, indent=2)