Lightweight Typeahead JavaScript Library – Vanilla Autocomplete

Preview:

Description:

A lightweight Vanilla JavaScript autocomplete/typeahead plugin that displays while typing something into a text input.

How to use it:

1. Import the stylesheet vanilla-autocomplete.css and JavaScript vanilla-autocomplete.js into the document.

<link rel="stylesheet" href="src/css/vanilla-autocomplete.css" />
<script src="src/js/vanilla-autocomplete.js"></script>

2. Define an array of suggestions.

let suggestions = [
    'Ubuntu',
    'Kubuntu',
    'Xubuntu',
    'KDE Neon',
    'openSUSE Tumbleweed',
    'Debian',
    'Arch Linux',
    'Slackware',
    'Gentoo',
    'Mageia',
]

3. Attach the Vanilla Autocomplete to your text field and done.

new VanillaAutoComplete({
    selector: document.querySelector("#myAutoComplete"),
    source: (typed, suggest) => {
      suggest(suggestions.filter(f => f.toLowerCase().match(new RegExp(typed))).sort())
    },
    onSelect: (data, item, event) => {
      console.log(data, item, event)
    }
})