samedi 28 février 2015

HTML5 input list features

I recently stumbled upon the HTML 5 <input list='myDataListName /> which can be used with a <datalist /> to perform "out of the box" auto-complete functionality, with no javascript required. Pretty cool!


Are there any other advanced configuration options within HTML5 for this new <input list="x"> type that are supported?

I know all of these options are possible using JavaScript even before this new HTML5 feature, but the new feature seems a little lacking without some of these options.


For example:



  • Sub string auto-complete. (type "Lastname" and find "Firstname Lastname" item)

  • Start matching only after first x characters are typed

  • Require selection of an item from the datalist

  • Tab to select first item

  • Server side callbacks the retrieve sub-set results for large lists


Example of HTML5 input list:





<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>



Aucun commentaire:

Enregistrer un commentaire