Autocompletion with HTML5 datalists

4/23/2013


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>