Fork-Awesome/assets/js/search.js

$(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 });
    }
});