Cuadro de selección filtrable en JavaScript puro-asterismo Custom Select

Vista prévia

Descripción

La biblioteca de JavaScript de Asterism Custom Select permite crear cuadros de selección personalizados con soporte de filtrado de elementos. De forma predeterminada, la selección personalizada de Asterism agrega automáticamente una entrada de búsqueda de filtro al cuadro de selección cuando el número de opciones es mayor que 7.

Funcionamiento

Incluya Select. min. CSS y SELECT. min. js en la Página Web.

<link href="dist/select.min.css" rel="stylesheet">
<script src="dist/select.min.js"></script>

Supongamos que tiene un cuadro de selección nativo como este:

<select id="demo">

<option value="1">HTML5</option>

<option value="2">CSS3</option>

<option value="3">JavaScript</option>

<option value="4">jQuery</option>

<option value="5">AngularJS</option>

<option value="6">ReactJS</option>

<option value="7">React Native</option>

<option value="8">Bootstrap</option>

<option value="9">Vue.js</option>

<option value="10">Python</option>
</select>

Cree un nuevo objeto SELECT y especifique el elemento de destino.

var mySelect = new Select('#demo');

Para configuración de la selección personalizada de Asterism, simplemente pase las siguientes opciones al objeto Select.

var mySelect = new Select('#demo',{



// auto show the live filter


filtered: 'auto',



// auto show the live filter when the options >= 8


filter_threshold: 8,



// custom placeholder


filter_placeholder: 'Filter options...'



});