Componente de autocompletado accesible en Vanilla JavaScript-Autocompletar

Vista prévia

Descripción

Un componente de autocompletar compatible, rápido, dinámico y accesible (WAI-ARIA) escrito en JavaScript Vanilla.

Es altamente personalizable a través de CSS y soporta la obtención asincrónica de datos.

Uso básico:

Instalar & descargar.

# Yarn
$ yarn add @trevoreyre/autocomplete-js

# NPM
$ npm install @trevoreyre/autocomplete-js --save

O incluya la hoja de estilos y JavaScript de una CDN.

<link rel="stylesheet" href="https://unpkg.com/@trevoreyre/autocomplete-js/dist/style.css">
<script src="https://unpkg.com/@trevoreyre/autocomplete-js"></script>

Cree un campo de entrada y una lista de resultados vacía para el componente de autocompletar.

<div id="autocomplete" class="autocomplete">

<input class="autocomplete-input"


placeholder="Search for a country"


aria-label="Search for a country"

>

<ul class="autocomplete-results"></ul>
</div>

Inicializar el componente y especificar el elemento contenedor de destino.

new Autocomplete('#autocomplete', {


// options here
}

Utilice la función de búsqueda para cargar y buscar en vivo los datos. Puede ser una función sincrónica o una promesa.

window['countries'] = [

'Afghanistan',

'Albania',

'Algeria',

'Andorra',

...
]

new Autocomplete('#autocomplete', {


search: input => {



if (input.length < 1) { return [] }



return countries.filter(country => {




return country.toLowerCase()





.startsWith(input.toLowerCase())



})


}
})

Más opciones & funciones para personalizar el componente de autocompletar.

new Autocomplete('#autocomplete', {



// fired on submit


onSubmit: Function,



// CSS class


baseClass: 'autocomplete'



// highlights the first result


autoSelect: false,



// executed to get the value of results


getResultValue Function,



 // overrides default rendering of results list


renderResults Function


}