Live Searching & Filtering For Large Data Sets With jQuery Quick Search Plugin
File Size: | 46.2 KB |
---|---|
Views Total: | 23840 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.