Elegante reemplazo multi-funtional caja de selección-BLOB-Select

Vista prévia

Descripción

BLOB-Select es un plugin de reemplazo de caja de selección multifuncional, rápido y fácil de usar implementado en JavaScript puro.

Características

• Filtro/búsqueda en vivo.
• Direcciones de pedido personalizadas.
• Marcador de posición personalizado.
• Selección múltiple.
• Admite OPTGROUP.

Funcionamiento

Para empezar, sólo tiene que incluir el JavaScript ' blobselect. min. js ' y la hoja de estilo ' blobselect. min. css ' en la Página Web.

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

Agregue los siguientes atributos de datos HTML al cuadro de selección y listo.

• Data-blobselect-placeholder: texto de marcador de posición
• datos-blobselect-marcador de posición: solo se utiliza para la lista desplegable
• datos-blobselect-orden-tipo: "String", "Numeric" o Empty
• datos-blobselect-orden: ' ASC ' o ' DEC '
• datos-blobselect-buscar: permite la búsqueda en vivo
• Data-Watch: obliga a BLOB-Select a volver a comprobar si hay cambios en su elemento cada X milisegundos

<select

id="select-demo"

data-blobselect-placeholder="Eat Something"

data-blobselect-placeholder-option="None of the Above"

data-blobselect-order-type="string"

data-blobselect-order="asc"

>

<option value="0"></option>

<option value="apples">Apples</option>

<option value="bananas">Bananas</option>

<option value="pears">Pears</option>

<option value="cabbage">Cabbage</option>

<option value="carrots">Carrots</option>

<option value="lettuce">Lettuce</option>
</select>

También puede pasar las opciones en la matriz ' Data-blobselect ':

<select

id="select-demo"

data-blobselect="{placeholder: 'Eat Something', placeholderOption: 'None of the Above', orderType: 'string', order: 'desc'}">

<option value="0"></option>

<option value="apples">Apples</option>

<option value="bananas">Bananas</option>

<option value="pears">Pears</option>

<option value="cabbage">Cabbage</option>

<option value="carrots">Carrots</option>

<option value="lettuce">Lettuce</option>
</select>

Registro de cambios

11/14/2018

• capturar clics en < marca >

06/11/2018

• corregir la ubicación del cursor de búsqueda