Fast Data Live Seach And Filter Plugin With jQuery - Nozzle

File Size: 26.2 KB
Views Total: 1073
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Fast Data Live Seach And Filter Plugin With jQuery - Nozzle

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:

<script src="//"></script>
<script src="dist/jquery.nozzle.min.js"></script>

2. Let's say you have an array of data objects as shown below:

var samples = [
      title: "Item 1",
      desc: "This is description for Item #"
      title: "Item 2",
      desc: "Description for Item #"
      title: "Item 2a",
      desc: "This is Item #"
      title: "Item 3",
      desc: "This is description for Item #"

3. Create filter controls:

<input class="form-control" name="title_filter" value="">
<input class="form-control" name="desc_filter" value="">
<select class="form-control" name="title_select_filter">
  <option value="">Any</option>
  <option value="Item 1">Item 1</option>
  <option value="Item 2">Item 2</option>
  <option value="Item 2a">Item 2a</option>

4. The JavaScript to active the plugin.

var $titleInput = $('input[name=title_filter]');
var $descInput = $('input[name=desc_filter]');
var $titleSelect = $('select[name=title_select_filter]');

  data: sample,
  filters: [
      attribute: 'title',
      value: $titleInput
      attribute: 'desc',                       
      value: $descInput
      attribute: 'title',
      value: $titleSelect,
      match: 'exact'

5. All default options and callbacks.

  data: null,
  deferRender: true,
  deferRenderDelay: 300,
  filters: [],
  filterCallback: null,
  render: false,
  renderCallback: null

Change log:


  • Ability to save filter in location hash


  • 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.