Datalist of HTML 5 to select option as we type in input box to auto complete

Datalist element in HTML 5

Datalist is added in HTML 5. This element is used inside a form to receive data from user.

It displays options for the users to select.
It is with auto complete feature helping users as they type in the text box
Unlike drop down list box or radio button user can write any text without limiting to options given by datalist.
Datalist is binded ( or linked ) by input element list attribute.

<input name="section" list="scripts" />


<datalist id="scripts">
    <option value="PHP" />
    <option value="JavaScript" />
    <option value="ASP" />
    <option value="Dot Net" />
    <option value="Perl" />
    <option value="JSP" />
</datalist>

Here is the demo of Datalist.

Difference between Datalist and Options of a dropdown list box

Options : User can select one of the options of a list box.

Datalist : In datalist user can select one or can enter anything other than the available choices.

When to use Datalist

When we give user the choice to enter data other than the available list then datalist to be used.

If we don’t want user to enter anything other than available list then go for options.

Example of Datalist

We ask user to enter the name of the town they are staying. We are not sure of having a list of all the towns as option to select by the user. Here user can select the town name if available or can enter a new town which is not available in our list of towns.

Datalist is a powerful tool for developers. Here are some of the applications.

Adding options to a Datalist by JavaScript

Adding options to a Datalist from MySQL table by using PHP and Ajax

Displaying Matching words by using Autocomplete while entering text JQuery UI

Datalist is not supported by Safari browser.