Lightweight Typeahead JavaScript Library – Vanilla Autocomplete

Category: Form , Javascript | December 27, 2019
Views Total:716 views
Official Page:Go to website
Last Update:December 27, 2019


Lightweight Typeahead JavaScript Library – Vanilla Autocomplete


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 = [
    'KDE Neon',
    'openSUSE Tumbleweed',
    'Arch Linux',

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)

You Might Be Interested In:

Leave a Reply