Wednesday, 30 April 2014

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


3 comments :

  1. Hi friends, This is Victoria from Chennai. I am a technology freak. I have read your blog. It was really a wonderful article and I was really impressed by reading this blog. Thanks for sharing this informative blog. I did HTML5 Training in Chennai at FITA academy, Its really useful for me to make a bright future.

    ReplyDelete
  2. Hello , I have been training students on AngularJS for past 6 months, and at times, I have used your blog as reference for the class training and also for my personal project development. It has been so much useful. Thank you, keep writing more:)
    AngularJS course in Chennai

    ReplyDelete
  3. In recent days Angular plays vital role to loading your site content in a fastest way, so it’s a required skill for everyone, thanks for sharing this useful information to our vision keep blogging.
    Regards,
    Angularjs training in chennai|Angularjs training chennai|Angularjs course in chennai

    ReplyDelete