mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2025-02-07 02:48:27 +08:00
63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
|
$(function() {
|
||
|
|
var SearchView = Backbone.View.extend({
|
||
|
|
|
||
|
|
template: _.template($("#results-template").html()),
|
||
|
|
|
||
|
|
events: {
|
||
|
|
"keyup #search-input": "search",
|
||
|
|
"click #search-clear": "clear"
|
||
|
|
},
|
||
|
|
|
||
|
|
initialize: function() {
|
||
|
|
this.algolia = algoliasearch("M19DXW5X0Q", "c79b2e61519372a99fa5890db070064c");
|
||
|
|
this.algoliaHelper = algoliasearchHelper(this.algolia, "font_awesome");
|
||
|
|
|
||
|
|
this.$searchInput = this.$("#search-input");
|
||
|
|
this.$searchResultsSection = this.$("#search-results");
|
||
|
|
this.$searchInputClear = this.$("#search-clear");
|
||
|
|
this.$iconsSection = this.$("#icons");
|
||
|
|
|
||
|
|
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");
|
||
|
|
this.$searchResultsSection.html(this.template({results: content}));
|
||
|
|
},
|
||
|
|
|
||
|
|
clearResults: function() {
|
||
|
|
this.$searchInput.val("").focus();
|
||
|
|
this.$searchResultsSection.addClass("hide");
|
||
|
|
this.$searchResultsSection.html("");
|
||
|
|
this.$searchInputClear.addClass("hide");
|
||
|
|
this.$iconsSection.removeClass("hide");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
var $searchViewElement = $("[data-view=search]");
|
||
|
|
|
||
|
|
if ($searchViewElement.length > 0) {
|
||
|
|
new SearchView({ el: $searchViewElement });
|
||
|
|
}
|
||
|
|
});
|