Tiny HTML5 Live Search Plugin With jQuery - e-search.js

e-search.js is a super tiny jQuery live search plugin which enables an input field to dynamically filter through large datasets using HTML5 data attribute.

How to use it:

1. Link to jQuery library and the jQuery e-search.js plugin:

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="e-search.js"></script>

2. Categorize your html contents using data-search attribute as these:

<div data-search="western mahjong">
  ...
</div>

<div data-search="stick freak">
  ...
</div>

<div data-search="mahjong master">
  ...
</div>

<div data-search="sevenxseven seven">
  ...
</div>

<div data-search="jewel duel">
  ...
</div>

...

3. Create a normal input field to filter through the html contents.

<input type="text" class="search-game" placeholder="Search Game...">

4. Invoke the plugin and done.

$('.search-game').search();

5. The search() currently comes with 2 parameters:

// $fn.search(callback,timeout);

$('input').search(function(){      
  // execute after filtering
}, 3000);

---

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