SONAR-5052 Rework top search (remove prototype.js)

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 b539aa07e45fb63da326c70111e2908b9b38540d..54db43b0afffb5513b70ba8c46e3f147f67104e5 100644 (file)
--- 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,6 +58,7 @@
     <%= javascript_include_tag 'widgets/histogram' %>
 
     <%= javascript_include_tag 'select-list' %>
+    <%= javascript_include_tag 'jquery.autocomplete' %>
 
     <%= javascript_include_tag 'navigator/handlebars-extensions' %>
 

diff --git a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
index 9fc074a29e35690735c7b6e8f436845d88836c91..4a42d0aee442b05c687832fe66c6be8ad155926e 100644 (file)
--- a/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
+++ b/sonar-server/src/main/webapp/WEB-INF/app/views/layouts/_layout.html.erb
@@ -29,7 +29,7 @@
     <div id="nav">
       <ul>
         <li>
-          <input type="text" size="15" name="search" id="searchInput" onFocus="autocompleteResources()" value="<%= message('search_verb') -%>"/>
+          <input type="text" size="15" name="search" id="searchInput" value="<%= message('search_verb') -%>">
           <img src="<%= ApplicationController.root_context -%>/images/loading-small.gif" id="searchingResources" style="display:none">
         </li>
         <% if logged_in? %>

diff --git a/sonar-server/src/main/webapp/javascripts/application.js b/sonar-server/src/main/webapp/javascripts/application.js
index ae00c85ab4ce01e0b1df213e1bfbc2f56a1d3b9c..7e175d28a45319d8d1718bfaf61913cddc3d4f0e 100644 (file)
--- a/sonar-server/src/main/webapp/javascripts/application.js
+++ b/sonar-server/src/main/webapp/javascripts/application.js
@@ -45,24 +45,6 @@ function dashboardParameters() {
   return parameters;
 }
 
-function autocompleteResources() {
-  $('searchInput').value = '';
-  new Ajax.Autocompleter('searchInput', 'searchResourcesResults', baseUrl + '/search', {
-    method: 'post',
-    minChars: 2,
-    indicator: 'searchingResources',
-    paramName: 's',
-    updateElement: function (item) {
-      if (item.id) {
-        window.location = baseUrl + '/dashboard/index/' + item.id + dashboardParameters();
-      }
-    },
-    onShow: function (element, update) { /* no update */
-      update.show();
-    }
-  });
-}
-
 function resourceViewerOnBulkIssues() {
   var issuesTab = 'tab=issues';
   if (window.location.search.indexOf('tab=') >= 0) {
@@ -548,3 +530,16 @@ function openPopup(url, popupId) {
   window.open(url,popupId,'height=800,width=900,scrollbars=1,resizable=1');
   return false;
 }
+
+
+jQuery(function() {
+  jQuery('#searchInput').autocomplete({
+    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/jquery.autocomplete.js
new file mode 100644 (file)
index 0000000..c5883cc
--- /dev/null
+++ b/sonar-server/src/main/webapp/javascripts/jquery.autocomplete.js
@@ -0,0 +1,138 @@
+(function($) {
+
+  var autocomplete = function(options) {
+
+    var el = $(this),
+        resultsEl = $(options.results),
+        spinnerEl = $(options.spinner);
+
+    var index, total, selected, items, symbol = false;
+
+
+    var select = function() {
+          if (selected) {
+            selected.removeClass('selected');
+          }
+
+          selected = items.eq(index);
+          selected.addClass('selected');
+        },
+
+        selectPrev = function() {
+          if (index > 0) {
+            index--;
+          }
+          select();
+        },
+
+        selectNext = function() {
+           if (index < total - 1) {
+             index++;
+           }
+          select();
+        },
+
+        choose = function() {
+          if (selected) {
+            var id = selected.prop('id');
+            window.location = baseUrl + '/dashboard/index/' + id;
+          }
+        },
+
+        show = function(content) {
+          resultsEl.html(content).show();
+          items = resultsEl.find('li');
+          index = -1;
+          total = items.length;
+          selectNext();
+
+          items
+              .on('mouseover', function() {
+                index = items.index($(this));
+                select();
+              })
+              .on('click', function() {
+                index = items.index($(this));
+                select();
+                choose();
+              });
+        },
+
+        hide = function() {
+          resultsEl.fadeOut();
+        };
+
+
+    el
+        .on('keydown', function(e) {
+          function prevent(e) {
+            e.preventDefault();
+            symbol = false;
+          }
+
+
+          switch (e.keyCode) {
+            case 13: // return
+              prevent(e);
+              choose();
+              return;
+            case 38: // up
+              prevent(e);
+              selectPrev();
+              return;
+            case 40: // down
+              prevent(e);
+              selectNext();
+              return;
+            case 37: // left
+            case 39: // right
+              symbol = false;
+              return;
+            default:
+              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('focus', function() {
+          el.data('placeholder', el.val());
+          el.val('');
+        })
+        .on('focusout', function() {
+          if (el.val().length === 0) {
+            el.val(el.data('placeholder') || '');
+          }
+          hide();
+        });
+
+    $('body').on('mousedown', function() {
+      hide();
+    });
+  };
+
+  $.extend($.fn, {
+    autocomplete: autocomplete
+  });
+
+})(jQuery);

diff --git a/sonar-server/wro.xml b/sonar-server/wro.xml
index fd042aecd4928dc7d76abb3f502355d9d84d9752..3e9816a5706630fca6cf6e7ee7b140439b0b3948 100644 (file)
--- a/sonar-server/wro.xml
+++ b/sonar-server/wro.xml
@@ -38,6 +38,7 @@
     <js>/javascripts/widgets/histogram.js</js>
     
     <js>/javascripts/select-list.js</js>
+    <js>/javascripts/jquery.autocomplete.js</js>
 
     <js>/javascripts/navigator/handlebars-extensions.js</js>