├── README.md
└── animated-search-filter.js


/README.md:
--------------------------------------------------------------------------------
 1 | # Usage
 2 | 
 3 | 1. Insert animated-search-filter.js anywhere on your page.
 4 | 2. Add an `animated-search-filter` class to your input and list container.
 5 | 
 6 | ```html
 7 | <input placeholder=Search class=animated-search-filter>
 8 | 
 9 | <ul class=animated-search-filter>
10 |   <li>Benjamin
11 |   <li>Alex
12 |   <li>Michael
13 |   <li>Philipp
14 | </ul>
15 | 
16 | <script src=animated-search-filter.js></script>
17 | ```
18 | [View demo →](http://playground.deaxon.com/js/animated-search-filter/)
19 | 


--------------------------------------------------------------------------------
/animated-search-filter.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener("DOMContentLoaded", function() {
 2 |   "use strict"
 3 | 
 4 |   var style = ""
 5 |     + "<style>"
 6 |     +   "input.animated-search-filter {"
 7 |     +     "-webkit-tap-highlight-color: transparent;"
 8 |     +   "}"
 9 |     +   ".animated-search-filter .hidden {"
10 |     +     "opacity: 0;"
11 |     +     "pointer-events: none;"
12 |     +   "}"
13 |     +   ".animated-search-filter > * {"
14 |     +     "position: absolute;"
15 |     +     "transition: .5s;"
16 |     +   "}"
17 |     + "</style>"
18 | 
19 |   document.head.insertAdjacentHTML("beforeend", style)
20 | 
21 |   var items = document.querySelectorAll(".animated-search-filter > *")
22 |   var itemHeight = items[0].offsetHeight
23 |   var texts = []
24 |   var i = -1
25 |   var len = items.length
26 |   var transform = "transform" in document.body.style ? "transform" : "webkitTransform"
27 | 
28 |   while (++i < len) {
29 |     texts.push(items[i].textContent.trim())
30 |     items[i].style[transform] = "translateY(" + i*itemHeight +"px)"
31 |   }
32 | 
33 |   document.querySelector("input.animated-search-filter").addEventListener("input", function() {
34 |     var re = new RegExp(this.value, "i")
35 |     texts.forEach(function(element, index) {
36 |       if (re.test(element)) {
37 |         items[index].classList.remove("hidden")
38 |       }
39 |       else {
40 |         items[index].classList.add("hidden")
41 |       }
42 |       var i = -1
43 |       var position = 0
44 |       while (++i < len) {
45 |         if (items[i].className != "hidden") {
46 |           items[i].style[transform] = "translateY(" + position++ * itemHeight + "px)"
47 |         }
48 |       }
49 |     })
50 |   })
51 | })
52 | 


--------------------------------------------------------------------------------