HTML5: Creating autocomplete using <datalist>

This entry is part 26 of 34 in the series HTML5

Datalist is quite similar to drop down select menu.  It is supported in major browsers except Safari.

It is used to provide a predefined list of options making the process of creating a list seems like an autocomplete form. Datalist
Users don’t necessarily have to choose from the predefined options; they can type their own answer if they wanted.

<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title> Datalist</title>
<label for='band_id'>What's your favourite rock band?</label>
<input list='bandlist' type='text' id='band_id' name='band' />
<datalist id='bandlist'>
    <option label='Oasis' value='Oasis' />
    <option label='Metallica' value='Metallica' />
    <option label='Poison' value='Poision' />
    <option label='Whitesnake' value='Whitesnake' />

In the above list, if you type wh in the input box, a prompt, whitesnake will be shown on the screen.

Series Navigation<< HTML5: Placeholder text in a form
HTML5: Progress bar >>

Leave a comment

Leave a Reply