Author: | raymondborkowski |
---|---|
Views Total: | 924 views |
Official Page: | Go to website |
Last Update: | October 25, 2018 |
License: | MIT |
Preview:

Description:
tiny-complete is an ultra-light JavaScript library for blazing autocomplete functionality (aka. typeahead, autosuggest) with support for fuzzy search.
How to use it:
Install & import.
# NPM $ npm install tiny-complete --save
// ES 6 import TC from 'tiny-complete'; // CommonJS: const TC = require('tiny-complete');
Or import the compiled & minified version of the tiny-complete library into the document.
<script src="/path/to/min.js"></script>
Prepare your data for the autosuggestion list.
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'}]
The example JavaScript to apply the tiny-complete to a given input field.
<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); } });
Specify the maximum number of results to show at a time. Defaults to 10.
myTC = new TinyComplete({ id: 'demo', listItems: myData onUserInput: onInputArray, onSelect: function(val) { console.log(val); }, maxResults: 20 });