jQuery Plugin For Fast In-page Filtering - filter_plugin.js

File Size: 6.74 KB
Views Total: 558
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Fast In-page Filtering - filter_plugin.js

Yet another jQuery in-page filtering plugin which allows to hide the unmatched elements as the user types in an associated input field.

How to use it:

1. Place jQuery library and the jQuery filter_plugin.js plugin at the end of the document so the page loads faster.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery_filter_plugin.js"></script>

2. Create a live search field and specify which & where to filter through using the following data attributes:

<input type="text" class="jquery_filter" placeholder="Search" 
       data-search-items-wrapper-id="#item-wrapper" 
       data-search-item-class=".item-class" 
       data-search-classes=".items-to-search">

3. The item list you want to filter through should be like this:

<div id="item-wrapper">
  
  <div class="item-class">
    <h3 class="items-to-search">Title 1</h3>
  </div>
  
  <div class="item-class">
    <h3 class="items-to-search">Title 2</h3>
  </div>

  <div class="item-class">
    <h3 class="items-to-search">Title 3</h3>
  </div>

  ...
  
</div>

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