Html5 autocomplete
Datalist html5 autocomplete tag
Last days we talked about the _renderItem method of the jQuery autocomplete, which was an advanced solution for creating complex autocomplete with images, lists and other things in it. The feedback that I received from the reading users was good, but something was missing still. People who wanted a basic autocomplete for modern browsers and don’t have jQuery knowledge at all were stuck in my explanation. This is why, for those users, I came up with this new approach Html5 autocomplete.
You can obtain a simple autocomplete for small data inputs like countries, cities, persons name and other stuff with the new datalist tab from HTML5. The HTML <datalist> tag is used for providing an “autocomplete” feature on form elements. It enables you to provide a list of predefined options to the user as they input data.
Let’s see what I am talking about. Imagine you have a list with programming languages that you want to generate in an autocomplete datalist for the user that is writing in the input. The list of programming languages is relatively small, so the data is not huge, therefore the loading of page is not slowed down by the amount of data we keep in the page.
Usage
The <datalist> tag can be used in conjunction with an <input> element that contains a list attribute.
The list attribute is linked to the <datalist> tag by the <datalist> tag’s ID. For example, if the <datalist> tag contains id="languages", then the list attribute will look like this: list="languages".
You can fill the <datalist> element by nesting <option> tags inside the <datalist> tag.
|
1 2 3 4 5 6 7 8 9 10 11 |
<form action="myForm.php" method="get"> <input list="languages" name="language"> <datalist id="languages"> <option value="PHP"> <option value="JAVA"> <option value="LISP"> <option value="C"> <option value="JAVASCRIPT"> </datalist> <input type="submit"> </form> |
The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari, but the element can be useful when you have predefined options that you want to use as autocomplete in HTML controls. It’s lack of browsers support forces us to have fallbacks to the behavior using JavaScript control libraries such as the autocomplete control in jQuery UI.
Until next time, keep coding !
