Form autocomplete dropdowns datalist

The <datalist> element used to provide an "autocomplete" feature on <input> elements. it's allows developers to create native autocomplete dropdowns for their web applications. before that autocomplete dropdowns could only done by using javascript.. and now using the <datalist> element you can create native autocomplete dropdowns for your website or application without using javascript

And now we are going to learn how to use the <datalist> element to create autocomplete dropdowns for website

The <datalist> element used for specifies a list of pre-defined options for an <input> element. The <datalist> element should have an id attribute To link your datalist to an <input> element and you need to apply a list attribute on the input and set its value to the id of your datalist. see the below demo and html for better understanding

Demo

HTML

<input type="text" list="listofdata" placeholder="e.g. html" class="autocomplat">

<datalist id="listofdata">
    <option value="Bootstrap">
    <option value="HTML">
    <option value="HTML5">
    <option value="CSS">
    <option value="CSS3">
    <option value="JavaScript">
    <option value="jQuery">
    <option value="AngularJS">
    <option value="Java">
    <option value="Ruby">
    <option value="PHP">
    <option value="Go">
    <option value="Erlang">
    <option value="Python">
    <option value="Font Awesome">
</datalist>

Browser Support

The <datalist> element is a support among browsers is pretty good. Safari is the only modern web browser not support for <datalist>.
Chrome: 20+, Firefox:4.0+, Opera: 9.0+, IE:10+

Source: http://caniuse.com/#feat=datalist

Try Your Self