Datalist, autosuggestions without JavaScript

I love that browsers get more and more native controls so that we developers don’t have to worry about JavaScript libraries.

Autocompletion is a pattern that all web users are familiar with. When you do a search, your search engine suggests terms. This functionality, however, has not been available to web developers without a nontrivial amount of JavaScript.

The coverage for this function is 95%. The best thing everything will still work if you are using a non-supporting browser.

The HTML element contains a set of 


<label for="color-choice">Choose a flavor:</label>
<input list="all-colors" id="color-choice" name="color-choice" />

<datalist id="all-colors">
    <option value="Red">
    <option value="Green">
    <option value="Black">
</datalist>

It even works if you want to have suggestions for values like this.


<label for="color-choice">Choose a flavor:</label>
<input list="all-colors" id="color-choice" name="color-choice" />

<datalist id="all-colors">
    <option value="#ff0000">Red</option>
    <option value="#00ff00">Green</option>
    <option value="#000000">Black</option>
</datalist>