Suggested Entries Using datalist Element: HTML5


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

suggest-list-entries-datalist-form-element-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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
< !DOCTYPE HTML>
<html>
<head>
<title>Auto Suggestion using datalist Element: HTML5</title>
<meta charset="utf-8"/>
</head>
<body>
 
<form>
<input type="text" list="myCompanies"/>
<datalist id="myCompanies">
<option value="Google">
</option><option value="Apple">
</option><option value="Oracle">
</option><option value="Yahoo">
</option><option value="IBM">
</option><option value="Microsoft">
</option><option value="Technotip">
</option><option value="American Express">
</option></datalist>
 
</form>
 
</body>
</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



YouTube Link: https://www.youtube.com/watch?v=3ExFs-lTbKY [Watch the Video In Full Screen.]



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!

Leave a Reply

Your email address will not be published. Required fields are marked *