Ultra lightweight, customizable, simple autocomplete widget with zero dependencies, built with modern standards for modern browsers . Because <datalist> still doesn’t cut it.

Note that by default you need to type at least 2 characters for the popup to show up, though that’s super easy to customize . With Awesomplete, making something like this can be as simple as:

Basic usage

Before you try anything, you need to include awesomplete.css and awesomplete.js in your page, via the usual <link rel="stylesheet" href="awesomplete.css" /> and <script src="awesomplete.js" async></script> tags.

For the autocomplete, you just need an <input> text field (might work on <textarea> and elements with contentEditable , but that hasn’t been tested). Add class="awesomplete" for it to be automatically processed (you can still specify many options via HTML attributes), otherwise you can instantiate with a few lines of JS code, which allow for more customization.

There are many ways to link an input to a list of suggestions. The simple example above could have also been made with the following markup, which provides a nice native fallback in case the script doesn’t load:

<input class="awesomplete" list="mylist" /> <datalist id="mylist"> <option>Ada</option> <option>Java</option> <option>JavaScript</option> <option>Brainfuck</option> <option>LOLCODE</option> <option>Node.js</option> <option>Ruby on Rails</option> </datalist>

// None!

Or the following, if you don’t want to use a <datalist> , or if you don’t want to use IDs (since any selector will work in data-list ):

<input class="awesomplete" data-list="#mylist" /> <ul id="mylist"> <li>Ada</li> <li>Java</li> <li>JavaScript</li> <li>Brainfuck</li> <li>LOLCODE</li> <li>Node.js</li> <li>Ruby on Rails</li> </ul>

// None!

Or the following, if we want to instantiate in JS:

<input id="myinput" /> <ul id="mylist"> <li>Ada</li> <li>Java</li> <li>JavaScript</li> <li>Brainfuck</li> <li>LOLCODE</li> <li>Node.js</li> <li>Ruby on Rails</li> </ul>

var input = document.getElementById("myinput"); new Awesomplete(input, {list: "#mylist"});

We can use an element reference for the list instead of a selector:

<input id="myinput" /> <ul id="mylist"> <li>Ada</li> <li>Java</li> <li>JavaScript</li> <li>Brainfuck</li> <li>LOLCODE</li> <li>Node.js</li> <li>Ruby on Rails</li> </ul>

var input = document.getElementById("myinput"); new Awesomplete(input, {list: document.querySelector("#mylist")});

We can also directly use an array of strings:

<input id="myinput" />

var input = document.getElementById("myinput"); new Awesomplete(input, { list: ["Ada", "Java", "JavaScript", "Brainfuck", "LOLCODE", "Node.js", "Ruby on Rails"] });

We can even set it (or override it) later and it will just work:

<input id="myinput" />

var input = document.getElementById("myinput"); var awesomplete = new Awesomplete(input); /* ...more code... */ awesomplete.list = ["Ada", "Java", "JavaScript", "Brainfuck", "LOLCODE", "Node.js", "Ruby on Rails"];

Suggestions with different label and value are supported too. The label will be shown in autocompleter and the value will be inserted into the input. If you want to insert the label into the input you can provide your own replace function

<input id="myinput" />