Improve UI of the autocomplete search

Author: ElPicador

resources/javascript/searchbar.js

@@ -36,14 +36,40 @@
                         categories[suggestion._tags[0]].push(suggestion)
                     });
 
-                    categories = $.map(Object.keys(categories).sort(), function(categoryName) {
-                        var items = categories[categoryName];
-                        items[0].isCategoryHeader = true;
-                        items[0].categoryName = capitalize(categoryName);
+                    var categoriesWithSubCategories = {}
+                    $.each(categories, function(categoryName, suggestions) {
+                        var subCategories = {}
+                        suggestions.forEach(function(suggestion) {
+                            var highlight = suggestion._highlightResult || {};
+                            var title = (highlight.title || {}).value
+                            title = title || suggestion.title
+                            title = title || categoryName
+                            subCategories[title] = subCategories[title] || []
+                            subCategories[title].push(suggestion)
+                        });
+                        categoriesWithSubCategories[categoryName] = subCategories;
+                    });
+
+                    var suggestionsSorted = []
+                    Object.keys(categoriesWithSubCategories).sort().forEach(function(categoryName) {
+                        var subCategories = categoriesWithSubCategories[categoryName];
+                        var firstInCategory = true;
+                        Object.keys(subCategories).sort().forEach(function(subCategoryName) {
+                            var items = subCategories[subCategoryName];
+                            items[0].isSubCategoryHeader = true;
+                            items[0].subCategoryName = capitalize(subCategoryName);
+
+                            if(firstInCategory) {
+                                items[0].isCategoryHeader = true;
+                                items[0].categoryName = capitalize(categoryName);
+                                firstInCategory = false;
+                            }
 
-                        return items;
+                            suggestionsSorted = suggestionsSorted.concat(items);
+                        });
                     });
-                    callback(categories);
+
+                    callback(suggestionsSorted);
                 });
             },
             name: 'a',
@@ -54,10 +80,14 @@
                     if(suggestion.isCategoryHeader) {
                         html.push('<div class="suggestion-category">' + suggestion.categoryName + '</div>');
                     }
+                    if(suggestion.isSubCategoryHeader) {
+                        html.push('<div class="suggestion-subcategory">' + suggestion.subCategoryName + '</div>');
+                    } else {
+                        html.push('<div class="suggestion-empty-subcategory">&nbsp;</div>');
+                    }
 
                     var highlight = suggestion._highlightResult || {};
                     var snippet = suggestion._snippetResult || {};
-                    var title = highlight.title.value;
                     var text = '';
                     for(var i = 0 ; i < ATTRIBUTES.length ; i++) {
                         if(highlight[ATTRIBUTES[i]] !== undefined) {
@@ -68,7 +98,6 @@
                     }
 
                     html.push('  <div class="suggestion-content">');
-                    html.push('    <div class="suggestion-title">' + title  + '</div>');
                     html.push('    <div class="suggestion-text">' + text + '</div>');
                     html.push('  </div>');
                     return html.join(' ');

resources/stylesheets/base.css

@@ -246,8 +246,9 @@ div#pop-up-arrow {
 }
 
 .algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
-    background-color: #B2D7FF;
+    background-color: #EEEEEE;
 }
+
 .algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
     font-weight: bold;
     font-style: normal;
@@ -263,14 +264,30 @@ div#pop-up-arrow {
     cursor: default;
 }
 
-.aa-suggestion .suggestion-content div {
+.aa-suggestion > div:not(.suggestion-category) {
     display: table-cell;
-    padding: 5px 7px;
+    padding: 5px;
 }
 
-.aa-suggestion .suggestion-content div:first-child {
+.aa-suggestion.aa-cursor .suggestion-empty-subcategory, .aa-suggestion.aa-cursor .suggestion-subcategory {
+    background-color: white;
+}
+
+.aa-suggestion .suggestion-empty-subcategory, .aa-suggestion .suggestion-subcategory {
     border-right: 2px solid #DE3423;
-    width: 180px;
+    width: 200px;
+    font-weight: 500;
+    z-index: 1000;
+    text-align: right;
+}
+
+.aa-suggestion .suggestion-content {
+    width: 276px;
+    border-top: 1px #999 solid;
+}
+
+.aa-suggestion .suggestion-category ~ .suggestion-content {
+    border-top: none;
 }
 
 .aa-dropdown-menu .branding-footer {