This time I will share jQuery Plugin and tutorial about In-page DOM Filtering With jQuery – QjSearch, hope it will help you in programming stack.
QjSearch is a very small jQuery in-page filtering plugin that enables a search field to hide non-matching items inside a given container as the user types.
Supports any DOM elements such as DIV containers, HTML tables, and etc.
How to use it:
1. Create a regular input field for the search filter.
- data-qjs: target element(s) to filter
- data-qjs-0: container for no results
- data-qjs-1: container for results
- data-qjs-res: container for result counter
02 |
<input type="text" id="search_field" |
03 |
data-qjs="#container .item" |
04 |
data-qjs-0="#emptyResult" |
06 |
data-qjs-res="#resultCount" |
11 |
<div id="emptyResult">Results not found.</div> |
14 |
<div id="result">Results: |
15 |
<span id="resultCount"></span> |
18 |
<div class="item">Item 1</div> |
19 |
<div class="item">Item 2</div> |
20 |
<div class="item">Item 3</div> |
2. Load the JavaScript qjsearch.min.js after jQuery.
2 |
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
3 |
crossorigin="anonymous"></script> |
4 |
<script src="qjsearch.min.js"></script> |
3. Call the function on the search field and done.
3 |
$("#search_field").qjsearch(); |
This awesome jQuery plugin is developed by yumadilowadim. For more Advanced Usages, please check the demo page or visit the official website.
