This time I will share jQuery Plugin and tutorial about Fast Data Live Seach And Filter Plugin With jQuery – Nozzle, hope it will help you in programming stack.
Nozzle is a lightweight and easy-to-use jQuery plugin that creates multiple filter controls to filter your large data sets on client side.
Basic usage:
1. To use this plugin, you have to download and load the Nozzle plugin after jQuer library as follow:
1 |
<script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script> |
2 |
<script src="dist/jquery.nozzle.min.js"></script> |
2. Let’s say you have an array of data objects as shown below:
04 |
desc: "This is description for Item #" |
08 |
desc: "Description for Item #" |
12 |
desc: "This is Item #" |
16 |
desc: "This is description for Item #" |
3. Create filter controls:
1 |
<input class="form-control" name="title_filter" value=""> |
2 |
<input class="form-control" name="desc_filter" value=""> |
3 |
<select class="form-control" name="title_select_filter"> |
4 |
<option value="">Any</option> |
5 |
<option value="Item 1">Item 1</option> |
6 |
<option value="Item 2">Item 2</option> |
7 |
<option value="Item 2a">Item 2a</option> |
4. The JavaScript to active the plugin.
01 |
var $titleInput = $('input[name=title_filter]'); |
02 |
var $descInput = $('input[name=desc_filter]'); |
03 |
var $titleSelect = $('select[name=title_select_filter]'); |
5. All default options and callbacks.
Change log:
2016-08-20
- Ability to save filter in location hash
2016-08-12
- New two-way data binding function
This awesome jQuery plugin is developed by marcinjackowiak. For more Advanced Usages, please check the demo page or visit the official website.
