Add snippets to search results

_includes/base/top_nav.html

@@ -17,13 +17,24 @@
       <script>
         var client = algoliasearch('{{ site.algolia.application_id }}', '{{ site.algolia.search_only_api_key }}');
         var index = client.initIndex('{{ site.algolia.index_name }}');
+
         autocomplete('#search-input', { hint: false }, [
           {
             source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
             displayKey: 'title',
             templates: {
               suggestion: function(suggestion) {
-                return suggestion._highlightResult.title.value;
+                let result = '<b>' + suggestion.title + '</b>';
+
+                if (suggestion._highlightResult && suggestion._highlightResult.title) {
+                  result = '<b>' + suggestion._highlightResult.title.value + '</b>';
+                }
+
+                if (suggestion._snippetResult && suggestion._snippetResult.content) {
+                  result += '<br />' + suggestion._snippetResult.content.value;
+                }
+
+                return '<p>' + result + '</p>';
               }
             }
           }

_sass/_algolia.scss

@@ -8,10 +8,9 @@
   color: #999;
 }
 .algolia-autocomplete .aa-dropdown-menu {
-  width: 100%;
+  width: 200%;
   background-color: #fff;
   border: 1px solid #999;
-  border-top: none;
 }
 .algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
   cursor: pointer;
@@ -21,6 +20,6 @@
   background-color: #B2D7FF;
 }
 .algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
-  font-weight: bold;
   font-style: normal;
+  background-color: #ffdb99;
 }