Live Searching & Filtering For Large Data Sets With jQuery Quick Search Plugin

Quick Search is an useful and high-performance jQuery plugin for live searching/filtering large data sets from data tables, lists, JSON data, etc.

Features:

• Search tables on rows or <th> elements only.
• Search html lists with javascript.
• Search data from a external file (such as JSON data) with ajax.
• Lots of options to customize.
• Callback events supported.

See also:

• Tiny Filterable Accordion List Plugin For jQuery  - Collapsable List
• jQuery Plugin For Sorting and Filtering Html Lists - listplus
• jQuery Plugin For Searchable And Scrollable Select Lists - searchSelect
• jQuery Plugin For Searchable Select List Box - Searchit
• jQuery Text Live Search & Filter Plugin - HideSeek

Basic Usage:

1. Load the jQuery javascript library and jQuery Quick Search plugin in your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="src/jquery.quicksearch.js"></script>

2. Create an input filed that accepts the search keywords or filter characters.

<input type="text" name="search" value="" id="demo" placeholder="Search" autofocus />

3. Create a data table or html lists you want to search/filter.

<table id="table_example">

<thead>
<tr>
<th width="30%">Email</th>
<th width="10%">Id</th>
<th width="10%">Phone</th>
<th width="10%">Total</th>
<th width="10%">Ip</th>
<th width="10%">Url</th>
<th width="10%">Time</th>
<th width="10%">ISO Date</th>
<th width="10%">UK Date</th>
</tr>
</thead>

<tbody>

<tr>
<th>[email protected]</th>
<td>66672</td>
<td>941-964-8535</td>
<td>$2482.79</td>
<td>172.78.200.124</td>
<td>http://gmail.com</td>
<td>15:10</td>
<td>1988/12/14</td>
<td>14/12/1988</td>
</tr>

...

</tbody>

</table>

4. Call the plugin and you're done.

<script>
$(function () {
$('input#demo').quicksearch('table tbody tr');								
});
</script>

5. All the default options.

$('input#demo').quicksearch('table tbody tr', {

  // Delay of trigger in milliseconds
  delay: 100, 

  // A query selector on sibling elements to test
  selector: null, 

  // An array of class names to go on each row
  stripeRows: null, 

  // A query selector to find a loading element
  loader: null, 

  // case sensitive?
  caseSensitive: false,

  // A query selector to show if there's no results for the search
  noResults: '', 

  // The amounts of matched results
  matchedResultsCount: 0,

  // Event that the trigger is tied to.
  bind: 'keyup search', 

  // Event that the reset event is tied to
  resetBind: 'reset',

  // Search on specific keycode
  keyCode : false,

  // Remove diacritics from the search input. 
  removeDiacritics: false, 

  // Establish a minimum length that the search value must have in order to perform the search.
  minValLength: 0,  

  // Function to call before trigger is called
  onBefore: $.noop, 

  // Function to call after trigger is called
  onAfter: $.noop, 

  // Function to call when the value does not exceeds the minValLength option.
  onValTooSmall: $.noop, 

  // Function to call when no results are found. 
  onNoResultFound: null,

  // Function that will add styles to matched elements
  show: function () {
    $(this).show();
  },

  // Function that will add styles to unmatched elements
  hide: function () {
    $(this).hide();
  },

  // Function that transforms text from input_selector into query used by 'testQuery' function
  prepareQuery: function (val) {
    return val.toLowerCase().split(' ');
  },

  // Function that tells if a given item should be hidden
  testQuery: function (query, txt, _row) {
    for (var i = 0; i < query.length; i += 1) {
      if (txt.indexOf(query[i]) === -1) {
        return false;
      }
    }
    return true;
  }
});

Change logs:

v2.4.0 (2017-08-16)

• Add option to search on specific keycode

v2.3.2 (2017-07-25)

• Replace this with window or global

v2.3.1 (2016-10-13)

• JS update

v2.3.0 (2016-07-28)

• Add 'caseSensitive' option

v2.2.3 (2016-05-25)

• fix: noResults element not shown on page-load

v2.2.2 (2016-02-10)

• fix function name

2014-05-28

• update.

---

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