Author: | elmahdim |
---|---|
Views Total: | 5,372 views |
Official Page: | Go to website |
Last Update: | June 11, 2015 |
License: | MIT |
Preview:

Description:
Selectem is a lightweight JavaScript library for create a custom CSS3 animated select dropdown with a live filter.
How to use it:
Load the selectem.min.css in the <head> and the selectem.min.js at the bottom of your html page.
<link rel="stylesheet" href="path/to/selectem.min.css"> <script src="path/to/selectem.min.js"></script>
Create a dropdown list with a search field as shown below.
<div class="selectem_dropdown"> <input class="selectem-value" name="selectemVal" type="hidden"> <input class="selectem-input" name="filter" type="text" autocomplete="off" data-filter placeholder="Filter: meow, dog, woof, quack..."> <ul class="selectem-items"> <li data-val="Bat"> <div class="item-avatar"> <img src="assets/images/bat.png" alt="Bat" /> </div> <div> <span class="item-label">Bat</span> <span class="pull-right"> <span class="label label-default">bat</span> <span class="label label-default">screech</span> </span> </div> </li> <li data-val="Cat"> <div class="item-avatar"> <img src="assets/images/cat.png" alt="Cat" /> </div> <div> <span class="item-label">Kitty</span> <span class="pull-right"> <span class="label label-default">cat</span> <span class="label label-default">kitty</span> <span class="label label-default">meow</span> </span> </div> </li> <li data-val="Dog"> <div class="item-avatar"> <img src="assets/images/dog-white.png" alt="White dog" /> </div> <div> <span class="item-label">White dog</span> <span class="pull-right"> <span class="label label-default">dog</span> <span class="label label-default">white</span> <span class="label label-default">woof</span> </span> </div> </li> <li data-val="Dog"> <div class="item-avatar"> <img src="assets/images/dog.png" alt="Cute dog" /> </div> <div> <span class="item-label">Cute dog</span> <span class="pull-right"> <span class="label label-default">dog</span> <span class="label label-default">cute</span> <span class="label label-default">woof</span> </span> </div> </li> <li data-val="Duck"> <div class="item-avatar"> <img src="assets/images/duck.png" alt="Ducky" /> </div> <div> <span class="item-label">Ducky</span> <span class="pull-right"> <span class="label label-default">duck</span> <span class="label label-default">ducky</span> <span class="label label-default">quack</span> </span> </div> </li> <li data-val="Forg"> <div class="item-avatar"> <img src="assets/images/frog.png" alt="Forg" /> </div> <div> <span class="item-label">Frog</span> <span class="pull-right"> <span class="label label-default">frog</span> <span class="label label-default">croak</span> <span class="label label-default">ribbit</span> </span> </div> </li> <li data-val="Rat"> <div class="item-avatar"> <img src="assets/images/rat.png" alt="Rat" /> </div> <div> <span class="item-label">Rat</span> <span class="pull-right"> <span class="label label-default">rat</span> <span class="label label-default">squeak</span> </span> </div> </li> </ul> </div>
Get the selected value. This will return the selected data-val attribute from the selectem-items list
var selectemVal = document.querySelector('input[name="selectemVal"]'); console.log (selectemVal);
Cool