In-page DOM Filtering With jQuery - QjSearch

File Size: 3.97 KB
Views Total: 3026
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
In-page DOM Filtering With jQuery - QjSearch

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
<-- Search Field -->
<input type="text" id="search_field"  
       data-qjs="#container .item" 

<div id="container">
  <!-- Empty Result -->
  <div id="emptyResult">Results not found.</div>

  <!-- Results -->
  <div id="result">Results: 
    <span id="resultCount"></span>

  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>

2. Load the JavaScript qjsearch.min.js after jQuery.

<script src="" 
<script src="qjsearch.min.js"></script>

3. Call the function on the search field and done.




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