jQuery Plugin For Fast In-page Filtering - filter_plugin.js
| File Size: | 6.74 KB |
|---|---|
| Views Total: | 566 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.











