Animated List Filtering & Searching – search-filter

Category: Javascript , Recommended | December 29, 2015
Author: bendc
Views Total: 3,644
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