Search: work on spelling suggestion

3 files changed, 62 insertions, 13 deletions

diff --git a/chimere/static/chimere/js/search-autocomplete.js b/chimere/static/chimere/js/search-autocomplete.js
index ea7531d..5e8a85e 100644
--- a/chimere/static/chimere/js/search-autocomplete.js
+++ b/chimere/static/chimere/js/search-autocomplete.js
@@ -1,4 +1,7 @@
 
+var do_you_mean = "Do you mean: ";
+var end_do_you_mean = "?";
+
 var Autocomplete = function(options) {
   this.form_selector = options.form_selector;
   this.url = options.url || '/search/autocomplete/';
@@ -28,14 +31,23 @@ Autocomplete.prototype.setup = function() {
     }
 
     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();
+    $('#spelling').fadeOut();
     return false;
-  })
+  });
+
+  // on selecting a suggestion, populate the search field.
+  $('#search-box').on('click', '.spelling-item', function(ev) {
+    self.query_box.val($(this).text());
+    $('.ac-results').remove();
+    $('#spelling').fadeOut();
+    return false;
+  });
 }
 
 Autocomplete.prototype.fetch = function(query) {
@@ -50,10 +62,33 @@ Autocomplete.prototype.fetch = function(query) {
       } else {
         $('.ac-results').remove();
       }
+      if(data.spelling.length){
+        self.show_spelling(data.spelling)
+      } else {
+        $("#spelling").fadeOut();
+      }
+      return true;
     }
   })
 }
 
+Autocomplete.prototype.show_spelling = function(spelling) {
+  var text = do_you_mean;
+  var base_elem = '<a href="#" class="spelling-item">'
+  var end_base_elem = '</a>';
+  for(var offset in spelling) {
+    if (offset > 0){
+      text += ", ";
+    }
+    text += base_elem;
+    text += spelling[offset];
+    text += end_base_elem;
+  }
+  text += end_do_you_mean;
+  $("#spelling").html(text);
+  $("#spelling").fadeIn();
+}
+
 Autocomplete.prototype.show_results = function(data) {
   // Remove any existing results.
   $('.ac-results').remove();
diff --git a/chimere/templates/search/search.html b/chimere/templates/search/search.html
index d5a0579..b0c7045 100644
--- a/chimere/templates/search/search.html
+++ b/chimere/templates/search/search.html
@@ -1,17 +1,24 @@
 {% load url from future %}{% load i18n %}
+<script type='text/javascript'>
+var do_you_mean = "{% trans 'Do you mean: ' %}";
+var end_do_you_mean = "{% trans '?' %}";
+</script>
 {% if query %}
 <script type='text/javascript'>
-var geo_objects = [{% for result in page.object_list %}{{result.object.getGeoJSON|safe}}{% if not forloop.last %}, {% endif %}{% endfor %}];
-var geo_features = {};
-for (idx=0 ; idx < geo_objects.length ; idx++){
-    var c_idx = geo_objects[idx].properties.pk;
-    if (search_result.indexOf(c_idx) == -1){
-        search_result.push(c_idx);
-        geo_features[c_idx] = $('#main-map').chimere('addMarker',
-                                                     geo_objects[idx]);
+$(function(){
+    var geo_objects = [{% for result in page.object_list %}{{result.object.getGeoJSON|safe}}{% if not forloop.last %}, {% endif %}{% endfor %}];
+    var geo_features = {};
+    for (idx=0 ; idx < geo_objects.length ; idx++){
+        var c_idx = geo_objects[idx].properties.pk;
+        if (search_result.indexOf(c_idx) == -1){
+            search_result.push(c_idx);
+            geo_features[c_idx] = $('#main-map').chimere('addMarker',
+                                                         geo_objects[idx]);
+        }
     }
-}
-{% if page.object_list.count %}$("#main-map").chimere("zoomToMarkerExtent");{% endif %}
+    {% if page.object_list.count %}$("#main-map").chimere("zoomToMarkerExtent");{% endif %}
+
+});
 </script>
 <div id='search-listing'>
   <ul>
@@ -36,6 +43,7 @@ for (idx=0 ; idx < geo_objects.length ; idx++){
     <input type="text" id="id_q" name="q" autocomplete="off"/>
     <button name='haystack-search' id='haystack-search' type='button' disabled='disabled' class="btn btn-default">{% trans "Search" %}</button>
 </form>
+<div id='spelling'></div>
 <div id='search-result'></div>
 <script type='text/javascript'>
 $(function(){
diff --git a/chimere/views.py b/chimere/views.py
index a696d5a..8daa432 100644
--- a/chimere/views.py
+++ b/chimere/views.py
@@ -962,9 +962,15 @@ if hasattr(settings, 'CHIMERE_SEARCH_ENGINE') \
         sqs = SearchQuerySet().autocomplete(
                                 content_auto=request.GET.get('q', ''))[:5]
         suggestions = [result.object.name for result in sqs if result.object]
+        spelling = []
+        if not suggestions:
+            spelling = SearchQuerySet().spelling_suggestion(
+                                            request.GET.get('q', '')) or []
+            # convert to list spelling...
         # make sure it returns a JSON object, not a bare list.
         # otherwise, it could be vulnerable to an XSS attack.
         the_data = json.dumps({
-            'results': suggestions
+            'results': suggestions,
+            'spelling':spelling,
         })
         return HttpResponse(the_data, content_type='application/json')