crossbrowdy/documentation/scripts/fulltext-search-ui.js

window.SearcherDisplay = (function($) {
    /**
     * This class provides support for displaying quick search text results to users.
     */
    function SearcherDisplay() { }

    SearcherDisplay.prototype.init = function() {
        this._displayQuickSearch();
    };

    /**
     * This method creates the quick text search entry in navigation menu and wires all required events.
     */
    SearcherDisplay.prototype._displayQuickSearch = function() {
            var quickSearch = $(document.createElement("iframe")),
                   body = $("body"),
                   self = this;

            quickSearch.attr("src", "quicksearch.html");
            quickSearch.css("width", "0px");
            quickSearch.css("height", "0px");

            body.append(quickSearch);

            $(window).on("message", function(msg) {
                var msgData = msg.originalEvent.data;

                if (msgData.msgid != "docstrap.quicksearch.done") {
                    return;
                }

                var results = msgData.results || [];

                self._displaySearchResults(results);
            });

            function startSearch() {
              var searchTerms = $('#search-input').prop("value");
              if (searchTerms) {
                quickSearch[0].contentWindow.postMessage({
                  "searchTerms": searchTerms,
                  "msgid": "docstrap.quicksearch.start"
                }, "*");
              }
            }

            $('#search-input').on('keyup', function(evt) {
              if (evt.keyCode != 13) {
                return;
              }
              startSearch();
              return false;
            });
            $('#search-submit').on('click', function() {
              startSearch();
              return false;
            });
    };

    /**
     * This method displays the quick text search results in a modal dialog.
     */
    SearcherDisplay.prototype._displaySearchResults = function(results) {
            var resultsHolder = $($("#searchResults").find(".modal-body")),
                  fragment = document.createDocumentFragment(),
                  resultsList = document.createElement("ul");

            resultsHolder.empty();

            for (var idx = 0; idx < results.length; idx++) {
                var result = results[idx],
                       item = document.createElement("li"),
                       link = document.createElement("a");

                link.href = result.id;
                link.innerHTML = result.title;

                item.appendChild(link)
                resultsList.appendChild(item);
            }

            fragment.appendChild(resultsList);
            resultsHolder.append(fragment);

            $("#searchResults").modal({"show": true});
    };

    return new SearcherDisplay();
})($);