Biblioteca de autocompletar difusa rápida-pequeña-completa

Vista prévia

Descripción

Tiny-complete es una librería JavaScript ultraligera para la funcionalidad de autocompletar (aka. typeahead, AutoSuggest) con soporte para búsqueda aproximada.

Funcionamiento

Instale & importar.

# NPM
$ npm install tiny-complete --save

// ES 6
import TC from 'tiny-complete';

// CommonJS:
const TC = require('tiny-complete');

O importar la versión compilada & minimizada de la biblioteca Tiny-complete en el documento.

<script src="/path/to/min.js"></script>

Prepare los datos para la lista de autosugerencias.

myData = ['LA', 'Miami', 'Detroit', 'NYC']

// or
myData = [{key: 'DTW', val: 'Detroit (DTW)'}, {key: 'LAX', val: 'LA'}, {key: 'MIA', val: 'Miami'}, {key: 'NYC', val: 'NYC'}, {key: 'LAX', val: 'LAMP'}]

El ejemplo de JavaScript para aplicar el Tiny-complete a un campo de entrada dado.

<input id="demo">

function onInputArray(filteredVals, query) {

if (query.length > 2 && filteredVals.length < 5) {


fetch('https://a.intentmedia.net/adServer/airports?q=' + query)




.then(function (response) {






return response.json();




})




.then(function(response) {






TC.addListItems(response.results.map(function(record) { return record.value }));




});

}
}

myTC = new TinyComplete({

id: 'demo',

listItems: myData

onUserInput: onInputArray,

onSelect: function(val) { console.log(val); }
});

Especifique el número máximo de resultados que se mostrarán a la vez. El valor predeterminado es 10.

myTC = new TinyComplete({

id: 'demo',

listItems: myData

onUserInput: onInputArray,

onSelect: function(val) { console.log(val); },

maxResults: 20
});