Auto complete using html5

We can do autocomplete Using jQuery or any other scripting language, but required some line of codes .It is very simple to do autocomplete using HTML5.HTML5 introduced a new tag datalist, this will do the trick.Let us check with a small example.

HTML

<input type="text" list="countries" name="country" />

<datalist id="countries">
 <option value="India">
 <option value="Albania">
 <option value="United Kingdom">
 <option value="United States">
 <option value="Australia">
 <option value="China">
 <option value="England">
 <option value="Zambia">
 <option value="Zimbabwe">
</datalist>

Working Demo

Sad thing is that some browsers are not started yet to support datalist tag.So far IE 10 and above, Firefox, Chrome and Opera 19 above supports html5 datalist tag. Safari doesn’t support datalist yet. But still you can be clever in those kind of browsers .For example

HTML

<input type="text" list="countries" name="country" />

<datalist id="countries">
<label>or select a country from list:</label>
  <select>
 <option value="India">
 <option value="Albania">
 <option value="United Kingdom">
 <option value="United States">
 <option value="Australia">
 <option value="China">
 <option value="England">
 <option value="Zambia">
 <option value="Zimbabwe">
 </select>
</datalist>

Open in safari and other browsers to see the result

Working Demo

Related Posts

1. Create responsive highchart

2. About CK-Editor

3. Dynamic height for side bar

4. Auto complete in Angular js