Fast Fuzzy Autocomplete Library – tiny-complete

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
});