filterThis jQuery plugin for client-side list filtering is a simple JQUERY component that enables you to filter a dynamic HTML menu through an input field.

jquery multiple filter plugin, jquery advanced search filter, jquery filter checkbox list, jquery category filter

How to make use of it:

1. Download and include the additional component JQUERY Filterthis Library.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="filterThis.js"></script>

2. Create a list of elements.

<ul class="group">
  <li class="group">
    <div class="user">
      <p class="name"> Derek Ortiz </p>
      <p> [email protected] </p>
    </div>
  </li>
  <li class="group">
    <div class="user">
      <p class="name"> Sad kitten </p>
      <p> [email protected] </p>
    </div>
  </li>
  <li class="group">
    <div class="user">
      <p class="name"> Kermit The Frog </p>
      <p> [email protected] </p>
    </div>
  </li>
  ...
</ul>

3. Create a text field to filter the HTML menu. The data filter goal feature is used to determine the target determinants for the list filter.

<input class="filter-box" type="text" 
       data-filter-target=".user p.name" 
       data-filter-hide=".user">
</input>

4. Call the additional component on the document.

$("input.filter-box").filterThis();

jQuery Plugin To Filter List Based On User Input, filterThis Plugin/Github

See Demo And Download

Official Website(derekortiz): Click Here

This superior jQuery/javascript plugin is developed by derekortiz. For extra advanced usage, please go to the official website.