Animated List Filtering & Searching – search-filter

search-filter is a pure JavaScript library which allows to dynamically filter long html list through an input field. It uses CSS3 transitions for smooth filter animations.

How to use it:

Insert the animated-search-filter.js anywhere on your page.

<script src="animated-search-filter.js"></script>

Add the animated-search-filter class to your input and list container as follow.

<input placeholder="Search" autofocus class="animated-search-filter">
<ul class="animated-search-filter">
  <li>JavaScript</li>
  <li>Java</li>
  <li>jQuery</li>
  <li>AngularJS</li>
  <li>ReactJS</li>
  <li>Bootstrap</li>
  <li>PHP</li>
  <li>Python</li>
</ul>