HTML <datalist> Tag

Use super cool HTML <datalist> Tag to implement autocomplete feature in app without using JavaScript code.

The <datalist> tag specifies a list of pre-defined options for an element. It is used to provide an "autocomplete" feature. It gives auto suggestions from options as per the input values.

The <datalist> element's id attribute must be equal to the <input> element's list attribute (this binds them together).

refer the below code -

 <label for="city">Select the City :- </label>
 <input list="cities" name="city" id="city">
 <datalist id="cities">
    <option value="Mumbai">
    <option value="Pune">
    <option value="Delhi">
    <option value="Manipal">
    <option value="Mangaluru">
 </datalist>

Output of above code will be as follows when user input M -

When user search for M the datalist will gives the suggestions from options which matches with input string.