We have all used (and most of us built) an autocomplete input element. There are thousands of plugins/widgets out there, although below I’m demonstrating the easiest, most semantic and HTML5 way to build it without using Javascript! Just put a normal input element and connect it with the new datalist element by using the list
attribute. That’s it! You’re semantically correct, HTML5 autocomplete input is ready!
<input name="frameworks" list="frameworks" />
<datalist id="frameworks">
<option value="jQuery"></option>
<option value="Ext JS"></option>
<option value="MooTools"></option>
<option value="Dojo"></option>
<option value="YUI"></option>
</datalist>