Real-time support documentation search

fuse-init.js

var docs = om_docs.docs; // Loaded via wp_localize_script()

/*
Sample docs array
[
    {
        title: 'A post title',
        url: 'http://optinmonster.com/docs/a-post-title'
    }
]
*/

var fuseSearch = new Fuse(docs, {keys: ['title']}) // You can specify the object properties to search

// Yep. That's it.

fuse-search.js

// Run the search when the user types
$(document).on('keyup', '#doc-search-field', function() {
    var $this = $(this),
        searchTerm = $this.val();
    
    // Run everything through the throttle method.
    _.throttle( function() {
        // Change the section header to match the search term
        $('#search-header').text('Searching for "' + searchTerm + '"');
    
        // Run Fuse search and build data object
        var data = {
           results: fuseSearch.search(searchTerm)
        };
    
        // Now display the results
        var listTemplate = _.template($('script#tmpl-om-doc-results').html(), data);
        $('#search-result-list').html(listTemplate);
    }, 1000); // Only update every second
    
});

search-submit.js

$(document).on('click', '.search-wrap .search-submit', function(e) {
	var $this = $(this);
	    searchTerm = $('#doc-search-field').val();
	    
	e.preventDefault();
	
	// Add the query argument to the URL
	var href = $this.attr('href') + '?doc_search_term=' + term
	
	// Now we can go to the ticket submission page
	window.location.href = href;
});

template.html

<script type="text/html" id="tmpl-om-doc-results">
	<% _.each(results, function(result) { %>
		<li><a href="<%= result.url %>"><i class="fa-li fa fa-file-o"></i> <%= result.title %></a></li>
	<% }); %>
</script>