Fast Realtime Content Filtering Plugin - jQuery liveSearch

Sometimes you want your users or clients to search for something on your website. For example, a hotel site searches for a hotel by name and location or a web community site needs to allow users to find specific discussions. That's where live search plugins come in handy. 

liveSearch is a lightweight, fast, easily customizable, and AJAX-enabled jQuery plugin that can be used to filter out any kind of content like plain text, list items, table rows, and many more. 

The live search results update in real-time as you type, just like Google Instant. This means your visitors can find what they are looking for even faster, and with less key-strokes.

See Also:

• 10 Best JavaScript Plugins To Filter Content Based On User Input
• 10 Best Table Filtering Plugin In JavaScript

How to use it:

1. Download the plugin and insert the main script jquery.live.search.min.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.live.search.min.js"></script>

2. Create a search field to filter out your content.

<input type="text" id="search-query">

3. Enable the plugin to filter out an HTML list.

<ul>
  <li>jQuery</li>
  <li>Script</li>
  <li>Net</li>
  ...
</ul>

$.liveSearch({
  selectorContainer: "ul",
  selectorElementsToSearch: "li",
});

4. Specify an item to ignore while fiterling.

$.liveSearch({
  selectorContainer: "ul",
  selectorElementsToSearch: "li",
  selectorFixed: "li:first",
});

5. The plugin also supports dynamic content loaded via AJAX contents.

$.liveSearch({
  selectorContainer: "ul",
  selectorElementsToSearch: "li",
  ajaxCallback: function(){
    $.get("/ajax-content.html", function(data){
      var search_query = objLiveSearch.getInputSearchVal();
      objLiveSearch.ajaxDone(data, search_query);
    }, 'html');
  },
});

6. Set the minimum number of characters to trigger the live search behavior. Default: 3.

$.liveSearch({
  selectorContainer: "ul",
  selectorElementsToSearch: "li",
  minCharacters: 2,
});

7. Set the time to wait before showing the result. Default: 500ms.

$.liveSearch({
  selectorContainer: "ul",
  selectorElementsToSearch: "li",
  typeDelay: 300,
});

8. All default plugin options.

$.liveSearch({
  selectorContainer: "table",
  selectorElementsToSearch: "td",
  selectorInputSearch: "input#search_query",
  selectorHead: false,
  selectorToHide: false,
  minCharacters: 3,
  typeDelay: 500,
  ajaxFilter: true,
  ajaxCallback: false
});

---

This awesome jQuery plugin is developed by dlanileonardo. For more Advanced Usages, please check the demo page or visit the official website.