Search dynamically as you type

To implement dynamic searching as the user types can be easily achieved using the typeahead plugin in javascript.

Include the following js file in your HTML page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/typeahead.bundle.min.js"></script>

Define an HTML element in your page.

<div class="search-bar">
   <input type="text" name="searchBar" placeholder="Search">
</div>

Add the following code to the HTML page in the script tag.

$(".search-bar input[type='text']").typeWatch(showSuggestions);

var showSuggestions = {
   callback : function(value) {
      if (value.length > 0) {
         $.ajax({
            url : searchUrl,
            type : "post",
            data : {
               searchKey : value,
            },
            success : function(data) {
               $('#searchSuggestions').html(data);
            }
         });
      } else {
         $('.global-header .search-bar .suggestions-box').hide();
      }
   },
   wait : 750,
   highlight : true,
   captureLength : 0
}

Thanks

Archna Dhingra