Entrada ligera autocompletar con vainilla JavaScript-Barq

Vista prévia

Descripción

Barq es una biblioteca de JavaScript ligera que convierte la lista de selección predeterminada en un texto archivado que tiene habilitada la función de autocompletar con regex.

Funcionamiento

Cargue el Barq. CSS en el encabezado para los estilos básicos.

<link href="barq.css" rel="stylesheet">

Cargue el Barq. js en la parte inferior del documento.

<script src="barq.js"></script>

Inserte una lista de selección en el documento.

<select id="demo">

<option>Select an airport</option>

<option value="1">Aalborg, Denmark (AAL)</option>

<option value="2">Aalesund, Norway (AES)</option>

<option value="ds" SELECTED>Aarhus, Denmark – Bus service (ZID)</option>

<option value="4">Aarhus, Denmark – Tirstrup (AAR)</option>

<option>Aasiaat, Greenland (JEG)</option>

<option value="">Abadan, Iran (ABD)</option>

<option value="">Abakan, Russia (ABA)</option>

<option value="">Aberdeen, United Kingdom (ABZ)</option>
</select>

Habilite el autocompletar.

var select = document.querySelector('#demo');
var barq = new Barq(select, {// OPTIONS HERE}).init();

Opciones disponibles.

enablePagination: false,
removeFirstOptionFromSearch: false,
useFirstOptionTextAsPlaceholder: false,
placeholderText: 'Select an item',
noResultsMessage: 'No itemss for you, pal :(',
onchange: function() {

alert('You selected the ' + this.text + ' model.');
}