Style for scaladex autocomplete

Author: MasseGuillaume

_config.yml

@@ -30,7 +30,7 @@ defaults:
       layout: blog-detail
       includeTOC: true
 
-# Custom collections
+# Custom collections
 collections:
   scala_items:
     output: false

_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

@@ -142,6 +142,10 @@ $('#scaladex-search').on('blur', function(e) {
     }
 });
 
+function scaladexUrl(item) {
+  return 'https://scaladex.scala-lang.org/' + item.organization + "/" + item.repository;
+}
+
 $('#scaladex-search').autocomplete({
     paramName: 'q',
     serviceUrl: 'https://index.scala-lang.org/api/autocomplete',
@@ -157,11 +161,14 @@ $('#scaladex-search').autocomplete({
         }
     },
     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();
@@ -171,10 +178,24 @@ $('#scaladex-search').autocomplete({
             prevResult = suggestion.data;
             hideSuggestions();
             $("#scaladex-search").blur();
-            window.open(suggestion.data, '_blank');
+            window.open(scaladexUrl(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() {