Custom Select Dropdown with Live Filter – Selectem

Category: Form , Javascript , Recommended | June 11, 2015
1 Comment
Demo Download
Author: elmahdim
Views Total: 4,283 views
Official Page: Go to website
Last Update: June 11, 2015
License: MIT

Preview:

Custom Select Dropdown with Live Filter – Selectem

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);

See Also:

You Might Be Interested In:

One thought on “Custom Select Dropdown with Live Filter – Selectem”

Leave a Reply