90 lines
		
	
	
		
			2.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
		
		
			
		
	
	
			90 lines
		
	
	
		
			2.8 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| 
								 | 
							
								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();
							 | 
						||
| 
								 | 
							
								})($);
							 |