1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
$(function() {
var SearchView = Backbone.View.extend({
events: {
"click #search-clear": "clear"
},
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");
this.$searchInputClear = this.$("#search-clear");
this.$iconsSection = this.$("#icons");
this.$searchInput.on("keyup", _.debounce(_.bind(this.search, this), 200));
this.algoliaHelper.on("result", _.bind(this.showResults, this));
},
search: function(event) {
var query = this.$searchInput.val();
if (query !== "") {
this. algoliaHelper.setQuery(query).search();
} else {
this.clearResults();
}
},
clear: function(event) {
event.preventDefault();
this.clearResults();
},
showResults: function(content, state) {
this.$searchResultsSection.html("");
this.$searchResultsSection.removeClass("hide");
this.$searchInputClear.removeClass("hide");
this.$iconsSection.addClass("hide");
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() {
this.$searchInput.val("").focus();
this.$searchResultsSection.addClass("hide");
this.$searchResultsSection.html("");
this.$searchInputClear.addClass("hide");
this.$iconsSection.removeClass("hide");
}
});
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 });
},
pullMatches: function(matches, list) {
if (list !== undefined) {
_.each(list, function(highlight) {
if (highlight.matchLevel !== "none") {
matches.push(highlight.value)
}
})
}
}
});
var $searchViewElement = $("[data-view=search]");
if ($searchViewElement.length > 0) {
new SearchView({ el: $searchViewElement });
}
});
|
