Search This Blog

Loading...

Jan 24, 2012

HTML 5 - DataList Auto Complete Features


Sponsored Links:
HTML5 have lots of new features. In my Last post about HTML5, you saw how to add Canvas in HTML5. Today I am going to share my idea about new control of HTML5 known as "DataList". It's pretty easy to add data list controls In HTML5. With the help of this new control you can take the advantage of autocomplete features, which is very helpful specially in web site and well popular in Google and other search engines too.

 In Google when you start typing, it gives some suggestions, Let's say you typed How, it will show you the complete list of available search string

Now back to HTML5, Let's say you wanted to  See the list of your favorite books, Add one input box as


<input type="text" id="favBook" list="dlfavbooks">
Now once you start tying something  you can see the list of available options.
 Complete code:

<label>
Enter your favorite Book:<br/>
<input type="text" id="favBook" list="dlfavbooks">
<datalist id="dlfavbooks">
<option value ="The Mine">
<option value="The Magic">
<option value="Birds Of The Indian Subcontinent ">
<option value="How To Unblock Everything On The Internet ">
<option value="Word Power Made Easy">
<option value="I Too Had A Love Story">
datalist>
label>
 
Output:




That's It!!! hope you like this



Follow by Email