Rápido Autocompletar & biblioteca de typeahead-autoComplete. js

Vista prévia

Descripción

Un autocompletado dinámico, increíblemente rápido, libre de dependencia y fácil de usar & biblioteca de JavaScript para el desarrollo web moderno.

Características

• Auto muestra la lista de sugerencias al escribir.
• Se admite la búsqueda aproximada.
• Resalta los resultados coincidentes.
• Marcador de posición personalizado.
• Limita el número máximo de resultados que se mostrarán.

Funcionamiento

Instale e importe el autoComplete. js.

import "./autoComplete.js";

Defina los datos.

const data = {



src: data,



key: ["CSS", "SCRIPT", "COM"]
}

Cree un campo de entrada con un ID único ' Autocompletar '.

<input id="autoComplete" type="text">

Adjunte el autoComplete. js al campo de entrada y listo.

new autoComplete({



// Array, Function, Async


data: myData,



// sort rendered results ascendingly | (Optional)


sort: (a, b) => {














if (a.match < b.match) return -1;




if (a.match > b.match) return 1;




return 0;


},



// min character length


threshold: 0,



// input field selector


selector: "#autoComplete"



// placeholder


placeHolder: "Type Here ...",



 // strict or loose


searchEngine: "strict",



// rendered results list object


resultsList: {




container: source => {




resultsListID = "language_List";




return resultsListID;



},



destination: document.querySelector("#autoComplete"),



position: "afterend"


},



// Rendered result item



 resultItem: (data, source) => {



 return `${data.match}`;


},



// maximum number of results to display


maxResults: 5,



// highlights results


highlight: false,



// triggered after selection


onSelection: value => {



 document.querySelector(".selection").innerHTML = value.id;


}



});

Registro de cambios

v4.0.0 (03/01/2019)

• Varias claves de búsqueda de datos src
• Resultados renderizados en caso original
• Entorno de desarrollo mejorado
• IE 11 Fix
• Se mejoró el objeto de datos devuelto onSelection
• Ordenar la API de resultados renderizados
• Navegación de resultados mejorada añadiendo la clave ArrowRight para la selección
• El emisor de eventos añadido en el tipo de campo de entrada devuelve
• Código de limpieza

v3.2.2 (02/06/2019)

• Solucionado el error con el valor predeterminado de la API del durante el modo estricto del motor
• Solucionado el error con el valor predeterminado de resultsList API cuando no se configuró

v3.2.1 (01/09/2018)

• Valor de resultsList aislado para varias instancias

v2.1.0 (01/06/2018)

• Actualizado

v2.0.0 (12/23/2018)

• Actualizado options.

v1.5.4 (12/21/2018)

• Las opciones de gzip para ambas compilaciones & problema de estilo fijo.

v1.5.3 (12/20/2018)

• Añadida la opción "Threshold", optimizaciones de código

v1.5.2 (12/19/2018)

• Solucionado el problema de acción nula de onSelection & se optimizó el código.

v1.4.1 (12/11/2018)

• Actualizado Presentation Layer.
• Limpieza de código.

v1.4.0 (12/09/2018)

• Añadido conmutador de modo searchEngine a la capa de presentación para una mejor demostración.
• Optimizado "autoComplete. js", cambió el estilo de entrada en la hoja "autoComplete. css" y las dependencias de compilación actualizadas.

v1.3.1 (12/03/2018)

• Los estilos de actualización

v1.3.0 (12/02/2018)

• Añadido nuevo "dataSrc" como una función devuelve "array".

v1.2.1 (11/27/2018)

• Añadida la función de longitud máxima del texto placeholder.

v1.2.0 (11/26/2018)

• Rediseñado todo el motor de búsqueda para una mejor experiencia y resultados, añadido soporte para la búsqueda de múltiples palabras clave.

v1.1.0 (11/25/2018)

• Refactorizado & optimizado toda la biblioteca para un peso más ligero y un mejor rendimiento.

11/23/2018

• Optimización redujo el peso de la biblioteca en 1KB.