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="//code.jquery.com/jquery-3.1.0.slim.min.js"></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>
</select>

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]');

$.nozzle.liveFilter({
  data: sample,
  filters: [
    {
      attribute: 'title',
      value: $titleInput
    },{
      attribute: 'desc',                       
      value: $descInput
    },{
      attribute: 'title',
      value: $titleSelect,
      match: 'exact'
    }
]
});

5. All default options and callbacks.

$.nozzle.liveFilter({
  data: null,
  deferRender: true,
  deferRenderDelay: 300,
  filters: [],
  filterCallback: null,
  render: false,
  renderCallback: null
});

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.