Getting all highlighted matches

This commit is contained in:
Travis Chase 2015-09-01 11:06:49 -05:00
parent bffb4ad551
commit 5efce50446
3 changed files with 52 additions and 13 deletions

View File

@ -1,8 +1,5 @@
$(function() { $(function() {
var SearchView = Backbone.View.extend({ var SearchView = Backbone.View.extend({
template: _.template($("#results-template").html()),
events: { events: {
"keyup #search-input": "search", "keyup #search-input": "search",
"click #search-clear": "clear" "click #search-clear": "clear"
@ -11,6 +8,7 @@ $(function() {
initialize: function() { initialize: function() {
this.algolia = algoliasearch("M19DXW5X0Q", "c79b2e61519372a99fa5890db070064c"); this.algolia = algoliasearch("M19DXW5X0Q", "c79b2e61519372a99fa5890db070064c");
this.algoliaHelper = algoliasearchHelper(this.algolia, "font_awesome"); this.algoliaHelper = algoliasearchHelper(this.algolia, "font_awesome");
this.template = _.template($("#results-template").html());
this.$searchInput = this.$("#search-input"); this.$searchInput = this.$("#search-input");
this.$searchResultsSection = this.$("#search-results"); this.$searchResultsSection = this.$("#search-results");
@ -41,7 +39,14 @@ $(function() {
this.$searchResultsSection.removeClass("hide"); this.$searchResultsSection.removeClass("hide");
this.$searchInputClear.removeClass("hide"); this.$searchInputClear.removeClass("hide");
this.$iconsSection.addClass("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() { 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]"); var $searchViewElement = $("[data-view=search]");

View File

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

View File

@ -56,16 +56,10 @@ relative_path: ../
{% include icons/medical.html %} {% include icons/medical.html %}
</div> </div>
<script type="text/template" id="results-template"> <script type="text/template" id="results-template">
<h2 class="page-header">Search for '<span class="text-color-default"><%= results.query %></span>'</h2> <h2 class="page-header">Search for '<span class="text-color-default"><%= content.query %></span>'</h2>
<% if (results.nbHits > 0) { %> <% if (content.nbHits > 0) { %>
<div class="row fontawesome-icon-list"> <div class="row fontawesome-icon-list">
<% _.each(results.hits, function(icon) { %> <%= results %>
<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>
<% }); %>
</div> </div>
<% } else { %> <% } else { %>
<div class="alert alert-danger text-lg" role="alert"> <div class="alert alert-danger text-lg" role="alert">
@ -90,4 +84,11 @@ relative_path: ../
</div> </div>
<% } %> <% } %>
</script> </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> </div>