Minimalist Client-side Live Search Plugin For jQuery - Search.js
File Size: | 9.42 KB |
---|---|
Views Total: | 8743 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Search.js is an ultra-light and fast jQuery live search plugin that provides a fast, client-side, case sensitive live filter functionality on your large data sets like lists and tables.
How to use it:
1. First you need to load the jQuery search.js script after loading jQuery library:
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.search.min.js"></script>
2. Create a text field which allows to filter items based on user input.
<input type="text" id="jquery-search-sample">
3. Add the CSS class 'jsearch-row' and 'jsearch-field' to your data that will be affected by the plugin.
<tr class="jsearch-row"> <td class="jsearch-field">Tiger Nixon</td> <td class="jsearch-field">System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr>
4. Call the function on the text field you just created and done.
$("#jquery-search-sample").jsearch();
5. Default plugin settings.
$("#jquery-search-sample").jsearch({ rowClass: '.jsearch-row', fieldClass: '.jsearch-field', minLength: 3, triggers: 'keyup', caseSensitive: false, });
Change log:
2016-12-24
- Changed search behavior when fieldClass == rowClass
This awesome jQuery plugin is developed by egoettelmann. For more Advanced Usages, please check the demo page or visit the official website.