Getting all highlighted matches

src/assets/js/search.js

@@ -1,8 +1,5 @@
 $(function() {
     var SearchView = Backbone.View.extend({
-
-        template: _.template($("#results-template").html()),
-
         events: {
             "keyup #search-input": "search",
             "click #search-clear": "clear"
@@ -11,6 +8,7 @@ $(function() {
         initialize: function() {
             this.algolia = algoliasearch("M19DXW5X0Q", "c79b2e61519372a99fa5890db070064c");
             this.algoliaHelper = algoliasearchHelper(this.algolia, "font_awesome");
+            this.template = _.template($("#results-template").html());
 
             this.$searchInput = this.$("#search-input");
             this.$searchResultsSection = this.$("#search-results");
@@ -41,7 +39,14 @@ $(function() {
             this.$searchResultsSection.removeClass("hide");
             this.$searchInputClear.removeClass("hide");
             this.$iconsSection.addClass("hide");
-            this.$searchResultsSection.html(this.template({results: content}));
+
+            var results = [];
+
+            _.each(content.hits, function(result) {
+                results.push(new SearchResultView({ result: result }).render())
+            });
+
+            this.$searchResultsSection.html(this.template({ content: content, results: results.join("") }));
         },
 
         clearResults: function() {
@@ -53,6 +58,32 @@ $(function() {
         }
     });
 
+    var SearchResultView = Backbone.View.extend({
+        initialize: function(options) {
+            this.template = _.template($("#result-template").html());
+            this.result = options.result
+        },
+
+        render: function() {
+            var matches = [];
+
+            this.pullMatches(matches, this.result._highlightResult.aliases);
+            this.pullMatches(matches, this.result._highlightResult.synonyms);
+
+            return this.template({ result: this.result, matches: matches.join(", ") });
+        },
+
+        pullMatches: function(matches, list) {
+            if (list !== undefined) {
+                _.each(list, function(highlight) {
+                    if (highlight.matchLevel !== "none") {
+                        matches.push(highlight.value)
+                    }
+                })
+            }
+        }
+    });
+
 
     var $searchViewElement = $("[data-view=search]");
 

src/assets/less/site/search.less

@@ -32,6 +32,13 @@
   }
 }
 
+#search-results {
+  em {
+    font-style: normal;
+    background: #1fa67a;
+  }
+}
+
 .algolia {
   margin-top: -20px;
   padding-top: 45px;

src/icons.html

@@ -56,16 +56,10 @@ relative_path: ../
     {% include icons/medical.html %}
   </div>
   <script type="text/template" id="results-template">
-    <h2 class="page-header">Search for '<span class="text-color-default"><%= results.query %></span>'</h2>
-    <% if (results.nbHits > 0) { %>
+    <h2 class="page-header">Search for '<span class="text-color-default"><%= content.query %></span>'</h2>
+    <% if (content.nbHits > 0) { %>
       <div class="row fontawesome-icon-list">
-      <% _.each(results.hits, function(icon) { %>
-        <div class="fa-hover col-md-3 col-sm-4">
-          <a href="{{ page.relative_path }}icon/<%= icon.name %>">
-            <i class="fa <%= icon.css_class %>"></i> <%= icon.name %>
-          </a>
-        </div>
-      <% }); %>
+        <%= results %>
       </div>
     <% } else { %>
       <div class="alert alert-danger text-lg" role="alert">
@@ -90,4 +84,11 @@ relative_path: ../
       </div>
     <% } %>
   </script>
+  <script type="text/template" id="result-template">
+    <div class="fa-hover col-md-3 col-sm-4">
+      <a href="{{ page.relative_path }}icon/<%= result.name %>">
+        <i class="fa <%= result.css_class %>"></i> <%= result._highlightResult.name.value %> <% if (matches !== "") { %>(<%= matches %>)<% } %>
+      </a>
+    </div>
+  </script>
 </div>