AutoComplete Feature Using HTML5 Datalist

Introduction

In this blog post, we will learn about how to create native autocomplete using HTML 5 Datalist element without using any JavaScript plugin and check some quick example of native autocomplete.

Previously all autocomplete dropdowns are implemented using JavaScript only. The <datalist> tag is HTML 5 pre-defined options for input element that allows developers to implement native autocomplete dropdowns  easily. This type of user interface component is commonly used on form fields and search boxes as it helps the user input data faster.

Let Get Started ..

For Example,

An <input> element with pre-defined values in a <datalist>:

At first, create input field with attribute list of value programming_languages and create <datalist> element with id value  programming_languages having options all autocomplete data. Thus Users will see a drop-down list of pre-defined options as they input data.

Browser Compatibility

Not every browser out there supports html5 datalist for now. So far IE 10 and above, Firefox, Chrome and Opera 19 above supports html5 datalist tag. Safari doesn’t support datalist yet 🙁
This might change in future. Check the latest compatibility matrix for HTML5 Datalist here http://caniuse.com/#search=datalist.

Chrome Firefox (Gecko) Internet Explorer Opera Safari
31 26.0 10.0 19.0

Default CSS Style for <datalist> tag is display:none;

Conclusion

In this blog, we have learned about <datalist> tag and implemented native autocomplete using Html 5 only.  Even if all old browser and safari are supported <datalist> but it helps for users with dropdown with some autocomplete in modern browser for better user experience.

 

 

 

No Comments

Post A Comment