Style for scaladex autocompletion

Author: MasseGuillaume

_layouts/frontpage.html

@@ -237,10 +237,6 @@ <h2>The Scala Library Index</h2>
         <div class="input-control">
           <span><i class="fa fa-search"></i></span>
           <input type="text" placeholder="Search" id="scaladex-search">
-          <div class="autocomplete-suggestions">
-              <div class="autocomplete-suggestion autocomplete-selected"></div>
-              <div class="autocomplete-suggestion"></div>
-          </div>
         </div>
       </div>
     </div>

_sass/layout/scala-ecosystem.scss

@@ -93,33 +93,52 @@
         }
     }
 
-    .autocomplete-suggestions {
-        border: 1px solid $gray-light;
-        background: #FFF;
-        overflow: auto;
-    }
+}
 
-    .autocomplete-suggestion {
-        padding: 2px 5px;
-        white-space: nowrap;
-        overflow: hidden;
-    }
+.autocomplete-suggestions {
+    width: 100%;
+    background: #fff;
+    top: 42px;
+    left: 0;
+    position: absolute;
+    z-index: 9999;
+    -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
+}
 
-    .autocomplete-selected {
-        background: $gray-lighter;
-    }
+.autocomplete-suggestions {
+    padding: 0;
+    margin: 0;
+}
 
-    .autocomplete-suggestions strong {
-        font-weight: normal;
-        color: $gray-dark;
-    }
+.autocomplete-suggestions .autocomplete-suggestion {
+    padding: 15px;
+    list-style: none;
+    border-bottom: 1px solid rgba(0, 43, 55, 0.1);
+}
 
-    .autocomplete-group {
-        padding: 2px 5px;
-    }
+.autocomplete-suggestions .autocomplete-suggestion:last-child {
+    border-bottom: none;
+}
 
-    .autocomplete-group strong {
-        display: block;
-        border-bottom: 1px solid $gray-light;
-    }
+.autocomplete-suggestions .autocomplete-suggestion a {
+    color: #586e75;
+}
+
+.autocomplete-suggestions .autocomplete-suggestion a:hover,
+.autocomplete-suggestions .autocomplete-suggestion a:active,
+.autocomplete-suggestions .autocomplete-suggestion a:focus {
+    text-decoration: none;
+}
+
+.autocomplete-suggestions .autocomplete-suggestion a p {
+    color: #224951;
+    margin: 0;
+    font-weight: 400;
+}
+
+.autocomplete-suggestions .autocomplete-suggestion:hover,
+.autocomplete-suggestions .autocomplete-suggestion.selected {
+    background: #edf1f1;
+    cursor: default;
 }

index.md

@@ -62,5 +62,5 @@ scalaIDEs:
 
 # Scala ecosystem
 ecosystemTitle: "Scala ecosystem"
-ecosystemDescription: "The Scala Library Index (or Scaladex) is a representation of a map of all published Scala libraries. With Scaladex, a developer can now query more than 100,000 releases of Scala libraries. Scaladex is officially supported by Scala Center."
+ecosystemDescription: "The Scala Library Index (or Scaladex) is a representation of a map of all published Scala libraries. With Scaladex, a developer can now query more than 175,000 releases of Scala libraries. Scaladex is officially supported by Scala Center."
 ---

resources/js/functions.js

@@ -102,88 +102,40 @@ $('#tweet-feed').tweetMachine('', {
 });
 
 // Scaladex autocomplete search
-var prevResult = "";
-var lastElementClicked;
 
-$(document).mousedown(function(e) {
-    lastElementClicked = $(e.target);
-});
-
-$(document).mouseup(function(e) {
-    lastElementClicked = null;
-});
-
-function hideSuggestions() {
-    $('.autocomplete-suggestions').hide();
-    $('.autocomplete-suggestion').hide();
+function scaladexUrl(item) {
+  return 'https://scaladex.scala-lang.org/' + item.organization + "/" + item.repository;
 }
 
-function showSuggestions() {
-    $('.autocomplete-suggestions').show();
-    $('.autocomplete-suggestion').show();
-}
-
-hideSuggestions();
-$('#scaladex-search').on('input', function(e) {
-    if ($("#scaladex-search").val() == "") hideSuggestions();
-});
-
-$('#scaladex-search').on('focus', function(e) {
-    if ($("#scaladex-search").val() != "") showSuggestions();
-});
-
-$('#scaladex-search').on('blur', function(e) {
-    if (!$(e.target).is('.autocomplete-suggestion')) {
-        if (lastElementClicked != null && !lastElementClicked.is('.autocomplete-suggestion')) {
-            hideSuggestions();
-        }
-    } else {
-        hideSuggestions();
-    }
-});
-
 $('#scaladex-search').autocomplete({
     paramName: 'q',
     serviceUrl: 'https://index.scala-lang.org/api/autocomplete',
     dataType: 'json',
-    beforeRender: function() {
-        showSuggestions();
-    },
-    onSearchStart: function(query) {
-        if (query == "") {
-            hideSuggestions()
-        } else {
-            showSuggestions();
-        }
-    },
     transformResult: function(response) {
-        return {
-            suggestions: $.map(response, function(dataItem) {
-                return { value: dataItem.repository, data: 'https://scaladex.scala-lang.org/' + dataItem.organization + "/" + dataItem.repository };
-            })
-        };
+      return {
+        suggestions: $.map(response, function(dataItem) {
+          return { 
+            value: dataItem.organization + " / " + dataItem.repository,
+            data: dataItem
+          };
+        })
+      };
     },
-    onSearchComplete: function (query, suggestions) {
-        suggestions.length > 0 ? showSuggestions() : hideSuggestions();
+    noCache: true,
+    onSelect: function (suggestion) {  
+      window.open(scaladexUrl(suggestion.data), '_blank');
     },
-    onSelect: function (suggestion) {
-        if (suggestion.data != prevResult) {
-            prevResult = suggestion.data;
-            hideSuggestions();
-            $("#scaladex-search").blur();
-            window.open(suggestion.data, '_blank');
-        }
+    formatResult: function(suggestion){
+      var item = suggestion.data;
+      var url = scaladexUrl(item);
+      var title = item.organization + " / " + item.repository;
+      return '<a href="' + url + '">' + '\n' +
+             '  <p>' + title + '</p>' + '\n' +
+             '  <span>'  + '\n' +
+             item.description
+             '  </span>'  + '\n' +
+             '</a>';
     }
-
-});
-
-$(document).ready(function() {
-    $(window).on("blur", function() {
-        if ($("#scaladex-search").length) {
-            $("#scaladex-search").blur();
-            $("#scaladex-search").autocomplete().clear();
-        }
-    });
 });
 
 // TOC: