Select First element every time in Searchable Datalist

I have searchable datalist (input with autocomplete), html as below

[COLOR=”#0000FF”]<input type=”text” id=”city” name=”city” list=”clist” placeholder=”Select City”>
<datalist id=”clist” name=”clist”>
<option value=”10th mile”>15094</option>
<option value=”A.s.peta”>2958</option>
<option value=”Faizpur”>7313</option>
<option value=”Gabbar”>7480</option>
<option value=”Gadag”>7227</option>
<option value=”Hadpid”>6474</option>
……</datalist>[/COLOR]

As I press the keys in input textbox, it filters the datalist and displays list that starts with text entered…
Now my requirement to select the first element of the new filtered list….

If I use the below line of code, the first element of the original datalist i.e. ‘[B]10th mile[/B]‘ is getting selected

[COLOR=”#0000FF”]$(“#clist option:first”).attr(‘selected’,’selected’);[/COLOR]

But I want the first item of the filtered datalist to be selected (rather than going to down-arrow and selecting the first element every time)…
I have tried with different type of code lines as below, but unsuccessful to select first element of the filtered datalist

[COLOR=”#0000FF”]$(“#clist”).selectedIndex=0;
$(“datalist[name=’clist’] option:eq(0)”).attr(“selected”, “selected”);
…[/COLOR]

Please help me up with this issue

Also in #HTML _↴