Minimal jQuery In-page Filter Plugin - easySearch

File Size: 7.7 KB
Views Total: 2275
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal jQuery In-page Filter Plugin - easySearch

easySearch is an ultra-light (~1kb) jQuery filter plugin which allows the user to filter/search through child elements of a specific dataset (html list or table) based on text input values.

More Examples:

How to use it:

1. Load jQuery library and the jQuery easySearch plugin's script at the end of the document so the page loads faster.

<script src="//code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="dist/jquery.easysearch.js"></script>

2. Create a search field to filter your data on client side.

<input type="text" placeholder="Search...">

3. Initialize the plugin and specify the target dataset you want to filter / search through.

$('input').jSearch({ 
  selector  : 'ul',
  child : 'li'
});

4. Set the minimum number of characters to search.

$('input').jSearch({ 
  selector  : 'table',
  child : 'tr > td',
  minValLength: 0
});

5. Callback functions available.

$('input').jSearch({ 
  selector  : 'ul',
  child : 'li',
  minValLength: 0,
  Found: function(elem){},
  NotFound: function(elem){},
  Before: function(t){},
  After: function(t){},
});

Change log:

2016-05-26


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