autocomplete in visualforce page

In this blog i will explain how we can use HTML datalist tag in visual force page to create a dropdown for input text box and capture the selected value in controller.
Recently i faced a scenario where i need to show drop down for a input text box and if i write in  text box then relevant options should display in drop down.
This can be achieved using <datalist> tag of html.

A datalist will be created which will store the options in it.

<datalist id="states">
<option value="Delhi"/>
<option value="Kashmir"/>
<option value="UP"/>
<option value="Gujarat"/>
<option value="Karnataka"/>
</datalist>

An input text will be created with list attribute. This attribute bind the input text to the datatable.

<input type="text" list="states" id="inputValue"/>

Now to pass the selected value value to the controller, an inputhidden tag will be used which will bind the selected value to the controller variable.

<apex:inputhidden id="hidden" value="{!selectedState}"/>

on input tag, oninput attribute will be used to call javascript when we select a value from drop down.

<input type="text" list="states" oninput="setValue();"/>
<script>
function setValue(){
   var options = document.getElementById("states").options;
   for(var i=0; i<options.length ; i++)
   {
    if(document.getElementById("inputValue").value == options[i].value) 
   document.getElementById("hidden").value = document.getElementById("inputValue").value;
   }
   
}
</script>
In the javascript above we are assigning the inputhidden field value to the selected value. This will set the selectedState variable value which further can be used in controller.