Lista desplegable de autocompletar rápida para el campo de entrada-AutoComplete. js

Vista prévia

Descripción

A vanilla JavaScript autocomplete library that attaches a blazing fast autocomplete dropdown list to your input field while typing.

Funcionamiento

Prepare el conjunto de datos para la lista de autocompletar. Especifique una matriz de sugerencias en cualquier archivo, como JSON, HTML, JS, etc.

// list.html
[

"JavaScript",

"JavaScript Vanilla"

"JavaScript Plugin"

...
]

Coloque el archivo JavaScript principal ' AutoComplete. js ' en la parte inferior del documento.

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

Agregue el atributo "Data-AutoComplete" necesario al campo de entrada y especifique el origen de datos que desea capturar.

<input type="text"




data-autocomplete




data-autocomplete-source="list.html"




placeholder="Try to type &quot;JavaScript&quot;"
>

Inicialice la biblioteca de autocompletar en el campo de entrada y obtenga la lista de sugerencias en el evento KeyUp.

var element = document.querySelector('input');
var autoComplete = new AutoComplete(element);

element.onkeyup = function () {

autoComplete.getSuggestionList();
}

Para especificar la longitud mínima del texto para ejecutar el autocompletar:

<input type="text"




data-autocomplete




data-autocomplete-source="list.html"




autocomplete-minlength="3"



 placeholder="Try to type &quot;JavaScript&quot;"
>

El ejemplo CSS para el estilo de la lista de autocompletar.

.autocomplete.dropdown {

background-color: #F8F8F8;

position: absolute;

box-shadow: 0 1px 3px 0px;

border-radius: 3px;

border: 1px solid #FAFAFA;

z-index: 100;

max-height: 250px;

overflow-y: auto;
}

.autocomplete.dropdown ul {

list-style: none;

margin: 0;

padding: 0;
}

.autocomplete.dropdown ul li {

padding: 4px 12px;
}

.autocomplete.dropdown ul li:focus,
.autocomplete.dropdown ul li:hover {

background-color: #F0F0F0;

cursor: pointer;
}

Registro de cambios

03/23/2019

• La función de selección de elementos se movió del constructor

05/30/2018

• Seleccione el elemento mediante el teclado