From 24469f1c64388e21ab49ee3d887a40fcdb9f1b6b Mon Sep 17 00:00:00 2001
From: Stas Vilchik <vilchiks@gmail.com>
Date: Tue, 11 Feb 2014 17:26:13 +0600
Subject: [PATCH] SONAR-5052 Rework top search

Use WS API
---
 .../WEB-INF/app/views/layouts/_head.html.erb  |   2 +-
 .../main/webapp/javascripts/application.js    |   6 +-
 .../{jquery.autocomplete.js => top-search.js} | 102 ++++++++++++------
 sonar-server/wro.xml                          |   2 +-
 4 files changed, 70 insertions(+), 42 deletions(-)
 rename sonar-server/src/main/webapp/javascripts/{jquery.autocomplete.js => top-search.js} (62%)

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
index 8173688c52c..9a8ffb17f80 100644
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_head.html.erb
@@ -58,7 +58,7 @@
     <%= javascript_include_tag 'widgets/histogram' %>
 
     <%= javascript_include_tag 'select-list' %>
-    <%= javascript_include_tag 'jquery.autocomplete' %>
+    <%= javascript_include_tag 'top-search' %>
     <%= javascript_include_tag 'sortable' %>
 
     <%= javascript_include_tag 'navigator/handlebars-extensions' %>
diff --git a/sonar-server/src/main/webapp/javascripts/application.js b/sonar-server/src/main/webapp/javascripts/application.js
index 7e175d28a45..318b8216d73 100644
--- a/sonar-server/src/main/webapp/javascripts/application.js
+++ b/sonar-server/src/main/webapp/javascripts/application.js
@@ -533,12 +533,8 @@ function openPopup(url, popupId) {
 
 
 jQuery(function() {
-  jQuery('#searchInput').autocomplete({
+  jQuery('#searchInput').topSearch({
     minLength: 2,
-
-    searchUrl: baseUrl + '/search',
-    searchTerm: 's',
-
     results: '#searchResourcesResults',
     spinner: '#searchingResources'
   });
diff --git a/sonar-server/src/main/webapp/javascripts/jquery.autocomplete.js b/sonar-server/src/main/webapp/javascripts/top-search.js
similarity index 62%
rename from sonar-server/src/main/webapp/javascripts/jquery.autocomplete.js
rename to sonar-server/src/main/webapp/javascripts/top-search.js
index c5883cc4a06..4b1691a5745 100644
--- a/sonar-server/src/main/webapp/javascripts/jquery.autocomplete.js
+++ b/sonar-server/src/main/webapp/javascripts/top-search.js
@@ -1,12 +1,12 @@
 (function($) {
 
-  var autocomplete = function(options) {
+  $.fn.topSearch = function(options) {
 
     var el = $(this),
         resultsEl = $(options.results),
         spinnerEl = $(options.spinner);
 
-    var index, total, selected, items, symbol = false;
+    var index, total, selected, items, term, symbol = false;
 
 
     var select = function() {
@@ -34,13 +34,47 @@
 
         choose = function() {
           if (selected) {
-            var id = selected.prop('id');
-            window.location = baseUrl + '/dashboard/index/' + id;
+            var key = selected.data('key');
+            window.location = baseUrl + '/dashboard/index/' + key;
           }
         },
 
-        show = function(content) {
-          resultsEl.html(content).show();
+        show = function(r) {
+          resultsEl.empty();
+
+          var ul = $('<ul></ul>').appendTo(resultsEl);
+
+          r.results.forEach(function(qualifier) {
+            qualifier.items.forEach(function(item, index) {
+              var el = $('<li></li>')
+                  .data('key', item.id),
+
+                  q = $('<div></div>')
+                      .addClass('q')
+                      .appendTo(el),
+
+                  highlightRegexp = new RegExp(term, 'gi'),
+                  highlightedName = item.name.replace(highlightRegexp, '<strong>$&</strong>'),
+
+                  label = $('<span></span>')
+                      .html(' ' + highlightedName)
+                      .appendTo(el);
+
+              $('<img>')
+                  .prop('src', baseUrl + qualifier.icon)
+                  .prop('width', 16)
+                  .prop('height', 16)
+                  .prependTo(label);
+
+              if (index === 0) {
+                q.text(qualifier.name);
+              }
+
+              el.appendTo(ul);
+            });
+          });
+
+          resultsEl.show();
           items = resultsEl.find('li');
           index = -1;
           total = items.length;
@@ -60,7 +94,32 @@
 
         hide = function() {
           resultsEl.fadeOut();
-        };
+        },
+
+        onKeyup = function() {
+          if (symbol) {
+            if (el.val().length >= options.minLength) {
+              term = el.val();
+
+              spinnerEl.show();
+              $.ajax({
+                url: baseUrl + '/api/components/suggestions',
+                data: { s: term }
+              })
+                  .done(function(r) {
+                    show(r);
+                  })
+                  .fail(hide)
+                  .always(function() {
+                    spinnerEl.hide();
+                  });
+            } else {
+              hide();
+            }
+          }
+        },
+
+        debouncedKeyup = _.debounce(onKeyup, 250);
 
 
     el
@@ -70,7 +129,6 @@
             symbol = false;
           }
 
-
           switch (e.keyCode) {
             case 13: // return
               prevent(e);
@@ -92,29 +150,7 @@
               symbol = true;
           }
         })
-        .on('keyup', function() {
-          if (symbol) {
-            if (el.val().length >= options.minLength) {
-              var data = {};
-              data[options.searchTerm] = el.val();
-
-              spinnerEl.show();
-              $.ajax({
-                    url: options.searchUrl,
-                    data: data
-                  })
-                  .done(function(r) {
-                    show(r);
-                  })
-                  .fail(hide)
-                  .always(function() {
-                    spinnerEl.hide();
-                  });
-            } else {
-              hide();
-            }
-          }
-        })
+        .on('keyup', debouncedKeyup)
         .on('focus', function() {
           el.data('placeholder', el.val());
           el.val('');
@@ -131,8 +167,4 @@
     });
   };
 
-  $.extend($.fn, {
-    autocomplete: autocomplete
-  });
-
 })(jQuery);
diff --git a/sonar-server/wro.xml b/sonar-server/wro.xml
index 53a2564b5b2..ee181e082ca 100644
--- a/sonar-server/wro.xml
+++ b/sonar-server/wro.xml
@@ -38,7 +38,7 @@
     <js>/javascripts/widgets/histogram.js</js>
     
     <js>/javascripts/select-list.js</js>
-    <js>/javascripts/jquery.autocomplete.js</js>
+    <js>/javascripts/top-search.js</js>
     <js>/javascripts/sortable.js</js>
 
     <js>/javascripts/navigator/handlebars-extensions.js</js>
-- 
2.39.5