Animated List Filtering & Searching – search-filter

Category: Javascript , Recommended | December 29, 2015
Author:bendc
Views Total:5,581 views
Official Page:Go to website
Last Update:December 29, 2015
License:MIT

Preview:

Animated List Filtering & Searching – search-filter

Description:

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>

You Might Be Interested In:


Leave a Reply