Merge pull request scala#472 from algolia/master

Autocomplete search: Improvements

Author: heathermiller

resources/javascript/searchbar.js

@@ -36,14 +36,40 @@
 categories[suggestion._tags[0]].push(suggestion)
 });
 
-categories=$.map(Object.keys(categories).sort(),function(categoryName){
-varitems=categories[categoryName];
-items[0].isCategoryHeader=true;
-items[0].categoryName=capitalize(categoryName);
+varcategoriesWithSubCategories={}
+$.each(categories,function(categoryName,suggestions){
+varsubCategories={}
+suggestions.forEach(function(suggestion){
+varhighlight=suggestion._highlightResult||{};
+vartitle=(highlight.title||{}).value
+title=title||suggestion.title
+title=title||categoryName
+subCategories[title]=subCategories[title]||[]
+subCategories[title].push(suggestion)
+});
+categoriesWithSubCategories[categoryName]=subCategories;
+});
+
+varsuggestionsSorted=[]
+Object.keys(categoriesWithSubCategories).sort().forEach(function(categoryName){
+varsubCategories=categoriesWithSubCategories[categoryName];
+varfirstInCategory=true;
+Object.keys(subCategories).sort().forEach(function(subCategoryName){
+varitems=subCategories[subCategoryName];
+items[0].isSubCategoryHeader=true;
+items[0].subCategoryName=capitalize(subCategoryName);
+
+if(firstInCategory){
+items[0].isCategoryHeader=true;
+items[0].categoryName=capitalize(categoryName);
+firstInCategory=false;
+}
 
-returnitems;
+suggestionsSorted=suggestionsSorted.concat(items);
+});
 });
-callback(categories);
+
+callback(suggestionsSorted);
 });
 },
 name: 'a',
@@ -54,21 +80,33 @@
 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>');
+}
 
 varhighlight=suggestion._highlightResult||{};
 varsnippet=suggestion._snippetResult||{};
-vartitle=highlight.title.value;
 vartext='';
 for(vari=0;i<ATTRIBUTES.length;i++){
 if(highlight[ATTRIBUTES[i]]!==undefined){
 text=highlight[ATTRIBUTES[i]].value;
-text=(snippet[ATTRIBUTES[i]]||{}).value||text;
+varsnippet=(snippet[ATTRIBUTES[i]]||{}).value
+if(snippet){
+if(snippet.charAt(0)===snippet.charAt(0).toLowerCase()){
+snippet="…&nbsp;"+snippet;
+}
+if(['.','!','?'].indexOf(snippet.charAt(snippet.length-1))===-1){
+snippet=snippet+"&nbsp;…";
+}
+}
+text=snippet||text;
 break;
 }
 }
 
 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>');
 returnhtml.join(' ');

resources/stylesheets/base.css

@@ -232,11 +232,11 @@ div#pop-up-arrow{
 }
 
 .algolia-autocomplete .aa-dropdown-menu{
-width:500px;
+width:550px;
 background-color:#fff;
 border:1px solid #404040;
 margin-top:2px;
-margin-left:-319px;
+margin-left:-369px;
 padding:1px;
 }
 
@@ -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-suggestionem{
 font-weight: bold;
 font-style: normal;
@@ -263,14 +264,30 @@ div#pop-up-arrow{
 cursor: default;
 }
 
-.aa-suggestion .suggestion-contentdiv{
+.aa-suggestion>div:not(.suggestion-category){
 display: table-cell;
-padding:5px7px;
+padding:5px;
 }
 
-.aa-suggestion .suggestion-contentdiv: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:150px;
+font-weight:500;
+z-index:1000;
+text-align: right;
+}
+
+.aa-suggestion .suggestion-content{
+width:376px;
+border-top:1px#999 solid;
+}
+
+.aa-suggestion .suggestion-category~ .suggestion-content{
+border-top: none;
 }
 
 .aa-dropdown-menu .branding-footer{