Web Development

This part is of the HTML5 Post Series dedicated to spread knowledge about HTML5

Autocomplete is probably one of the most used UI implementations of the last decade.

Why shouldn’t it be? It makes it easier for websites to present possible values you would want. It makes for a sleeker form instead of having an ugly select tag.

HTML5 Datalist

As always HTML5 has come up with the neatest tricks possible. As a replacement to our old autocomplete implementations, HTML5 presents the Datalist.

How to Use

First, we will need to have some data that we want to present to our users.

<datalist id="countries">
    <option value="United States">
    <option value="Afghanistan">
    <option value="Andorra">
    <option value="Antigua and Barbuda">
    <option value="Argentina">
    <option value="Armenia">
    <option value="Australia">
    <option value="Austria">
    <option value="Azerbaijan">
    <option value="Bahamas">
    <option value="Bahrain">
    <option value="Bangladesh">
    <option value="Barbados">
    <option value="Belarus">
    <option value="Belgium">
    <option value="Belize">
    <option value="Benin">
    <option value="Bhutan">
    <option value="Bolivia">
    <option value="Bosnia and Herzegovina">
    <option value="Botswana">
    <option value="Brazil">
    <option value="Brunei">
    <option value="Bulgaria">
    <option value="Burkina Faso">
    <option value="Burundi">
    <option value="Cambodia">
    <option value="Cameroon">
    <option value="Canada">
    <option value="Cape Verde">
    <option value="Central African Republic">
    <option value="Chad">
    <option value="Chile">
    <option value="China">
    <option value="Colombia">
    <option value="Comoros">
    <option value="Congo (Brazzaville)">
    <option value="Congo">
    <option value="Costa Rica">
    <option value="Cote d'Ivoire">
    <option value="Croatia">
    <option value="Cuba">
    <option value="Cyprus">
    <option value="Czech Republic">
    <option value="Denmark">
    <option value="Djibouti">
    <option value="Burundi">
    <option value="Dominica">
    <option value="Dominican Republic">
    <option value="East Timor (Timor Timur)">
    <option value="Ecuador">
    <option value="Egypt">
</datalist>

Then we need to add our input box

<input name="countries" list="countries" />

Try it!

Try the HTML5 Datalist sample here!