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

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

By Posted on

This time I will share jQuery Plugin and tutorial about Live Searching & Filtering For Large Data Sets With jQuery Quick Search Plugin, hope it will help you in programming stack.

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

File Size: 46.2 KB
Views Total: 21931
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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.

Basic Usage:

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

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

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

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

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

view source
01 <table id="table_example">
02  
03 <thead>
04 <tr>
05 <th width="30%">Email</th>
06 <th width="10%">Id</th>
07 <th width="10%">Phone</th>
08 <th width="10%">Total</th>
09 <th width="10%">Ip</th>
10 <th width="10%">Url</th>
11 <th width="10%">Time</th>
12 <th width="10%">ISO Date</th>
13 <th width="10%">UK Date</th>
14 </tr>
15 </thead>
16  
17 <tbody>
18  
19 <tr>
20 <th>devo@flexomat.com</th>
21 <td>66672</td>
22 <td>941-964-8535</td>
23 <td>$2482.79</td>
24 <td>172.78.200.124</td>
25 <td>http://gmail.com</td>
26 <td>15:10</td>
27 <td>1988/12/14</td>
28 <td>14/12/1988</td>
29 </tr>
30  
31 ...
32  
33 </tbody>
34  
35 </table>

4. Call the plugin and you’re done.

view source
1 <script>
2 $(function () {
3 $('input#demo').quicksearch('table tbody tr');               
4 });
5 </script>

5. All the default options.

view source
01 $('input#demo').quicksearch('table tbody tr', {
02  
03   // Delay of trigger in milliseconds
04   delay: 100,
05  
06   // A query selector on sibling elements to test
07   selector: null,
08  
09   // An array of class names to go on each row
10   stripeRows: null,
11  
12   // A query selector to find a loading element
13   loader: null,
14  
15   // case sensitive?
16   caseSensitive: false,
17  
18   // A query selector to show if there's no results for the search
19   noResults: '',
20  
21   // The amounts of matched results
22   matchedResultsCount: 0,
23  
24   // Event that the trigger is tied to.
25   bind: 'keyup search',
26  
27   // Event that the reset event is tied to
28   resetBind: 'reset',
29  
30   // Search on specific keycode
31   keyCode : false,
32  
33   // Remove diacritics from the search input.
34   removeDiacritics: false,
35  
36   // Establish a minimum length that the search value must have in order to perform the search.
37   minValLength: 0, 
38  
39   // Function to call before trigger is called
40   onBefore: $.noop,
41  
42   // Function to call after trigger is called
43   onAfter: $.noop,
44  
45   // Function to call when the value does not exceeds the minValLength option.
46   onValTooSmall: $.noop,
47  
48   // Function to call when no results are found.
49   onNoResultFound: null,
50  
51   // Function that will add styles to matched elements
52   show: function () {
53     $(this).show();
54   },
55  
56   // Function that will add styles to unmatched elements
57   hide: function () {
58     $(this).hide();
59   },
60  
61   // Function that transforms text from input_selector into query used by 'testQuery' function

source : jqueryscript.net

Related posts:

62