Menú desplegable de selección personalizada con filtro en vivo-Selectem

Vista prévia

Descripción

Selectem es una biblioteca de JavaScript ligera para crear un menú desplegable de selección animado de CSS3 personalizado con un filtro en vivo.

Funcionamiento

Cargue el selectem. min. CSS en el < > de la cabeza y el selectem. min. js en la parte inferior de la página HTML.

<link rel="stylesheet" href="path/to/selectem.min.css">
<script src="path/to/selectem.min.js"></script>

Cree una lista desplegable con un campo de búsqueda como se muestra a continuación.

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

Obtenga el valor seleccionado. Esto devolverá el atributo Data-Val seleccionado de la lista selectem-items

var selectemVal = document.querySelector('input[name="selectemVal"]');
console.log (selectemVal);