Work on autocomplete

3 files changed, 82 insertions, 2 deletions

diff --git a/chimere/static/chimere/js/jquery.chimere.js b/chimere/static/chimere/js/jquery.chimere.js
index d04e1ae..23165fa 100644
--- a/chimere/static/chimere/js/jquery.chimere.js
+++ b/chimere/static/chimere/js/jquery.chimere.js
@@ -732,8 +732,8 @@ OpenLayers.Layer.MapQuestOSM = OpenLayers.Class(OpenLayers.Layer.XYZ, {
                     var id = this.id.substr(this.id.lastIndexOf("_")+1);
                     helpers.zoom_to_subcategories([id]);
                 });
-                $(".toggle_category").parent().bind("click", function (e) {
-                    var item = $(this).children('.toggle_category');
+                $(".toggle_category").bind("click", function (e) {
+                    var item = $(this);
                     var id = item.attr('id').substr(item.attr('id').lastIndexOf("_")+1);
                     methods.toggle_category(id);
                 });
diff --git a/chimere/static/chimere/js/search-autocomplete.js b/chimere/static/chimere/js/search-autocomplete.js
new file mode 100644
index 0000000..79faab1
--- /dev/null
+++ b/chimere/static/chimere/js/search-autocomplete.js
@@ -0,0 +1,78 @@
+
+var no_result_message = "No results found.";
+
+var Autocomplete = function(options) {
+  this.form_selector = options.form_selector;
+  this.url = options.url || '/search/autocomplete/';
+  this.delay = parseInt(options.delay || 300);
+  this.minimum_length = parseInt(options.minimum_length || 3);
+  this.form_elem = null;
+  this.query_box = null;
+}
+
+Autocomplete.prototype.setup = function() {
+  var self = this;
+
+  this.form_elem = $(this.form_selector);
+  this.query_box = this.form_elem.find('input[name=q]');
+
+  // watch the input box.
+  this.query_box.on('keyup', function() {
+    var query = self.query_box.val();
+    if (query){
+        $('#haystack-search').removeAttr("disabled");
+    } else {
+        $('#haystack-search').attr('disabled', 'disabled');
+    }
+
+    if(query.length < self.minimum_length) {
+      return false;
+    }
+
+    self.fetch(query);
+  })
+
+  // on selecting a result, populate the search field.
+  this.form_elem.on('click', '.ac-result', function(ev) {
+    self.query_box.val($(this).text());
+    $('.ac-results').remove();
+    return false;
+  })
+}
+
+Autocomplete.prototype.fetch = function(query) {
+  var self = this ;
+
+  $.ajax({
+    url: this.url,
+    data: { 'q': query },
+    success: function(data) {
+      self.show_results(data);
+    }
+  })
+}
+
+Autocomplete.prototype.show_results = function(data) {
+  // Remove any existing results.
+  $('.ac-results').remove();
+
+  var results = data.results || []
+  var results_wrapper = $('<div class="ac-results"></div>');
+  var base_elem = $('<div class="result-wrapper"><a href="#" class="ac-result"></a></div>');
+
+  if(results.length > 0) {
+    for(var res_offset in results) {
+      var elem = base_elem.clone();
+      // don't use .html(...) here, as it opens to XSS.
+      elem.find('.ac-result').text(results[res_offset]);
+      results_wrapper.append(elem);
+    }
+  }
+  else {
+    var elem = base_elem.clone();
+    elem.text(no_result_message);
+    results_wrapper.append(elem);
+  }
+
+  this.query_box.after(results_wrapper)
+}
diff --git a/chimere/static/chimere/js/search.js b/chimere/static/chimere/js/search.js
index 779a32d..6f46f3f 100644
--- a/chimere/static/chimere/js/search.js
+++ b/chimere/static/chimere/js/search.js
@@ -8,12 +8,14 @@ function load_search_box(){
 function haystack_search(evt, page){
     search_result = new Array();
     $('#categories').find('#ul_categories > li > input').attr("checked", false);
+    if (!$('#id_q').val()) return false;
 
     var c_url = search_url + "?q=" + $('#id_q').val();
     if (page){
         c_url += '&page=' + page;
     }
     $.get(c_url).done(function( data ) {
+        $('.ac-results').remove();
         $('#search-result').html(data).show('slow');
     });
     return false;