Suggested Entries Using datalist Element: HTML5

Lets build a simple auto suggesting form field with the help of datalist form element of HTML5.

Here I’ve taken a text input field, and with the help of datalist element and list attribute, have built a auto suggesting form field.

HTML file
index.html

< !DOCTYPE HTML>

Here I’ve added a list attribute to the input field and named it as myCompanies. Also have taken datalist form element with an id which matches the list attribute of the input field.

Auto Suggested Entries Using list attribute: HTML5

Note: You can get the user entry by using key press event, and fetch the corresponding data from the database using PHP, jQuery and mySQL and auto suggest some form entries.
Make sure to fetch 5 to 10 entries only, as it may take more time and may overload the server if you don’t limit the no of entries you fetch from the database. And more over it looks confusing and cluttered, if you suggest too many things at once!