Hi all,

Datalist is a new element in HTML5 and very useful. Basically it works with input box and when we write text in it, it will show a related item in list like option box.

Example :-

<label>Select your preferred code editor:</label>
<input type="text" id="txt_ide" list="ide" />
<datalist id="ide">
    <option value="Brackets" label="by Adobe" />
    <option value="Coda" label="by Panic" />
    <option value="Dreamweaver" />
    <option value="Espresso" />
    <option value="jEdit" />
    <option value="Komodo Edit" />
    <option value="Notepad++" />
    <option value="Sublime Text 2" label="the developer's choice" />
    <option value="Taco HTML Edit" />
    <option value="Textmate" />
    <option value="Text Pad" />
    <option value="TextWrangler" />
    <option value="Visual Studio" />
    <option value="VIM" />
    <option value="XCode" />
</datalist>

Output:-

By using above code, when you run it in the browser, it will appears like a normal textbox, but when you starting typing in the text box, the complete or filtered list will appears to you. As you type, only the relevant options will be shown according to your search or text you enter in text box, same as Google's Search box displays suggestions. Be aware though, slight behavioral variations may exist from browser to browser.