I am using a datalist to select a city . I want the first row of the datalist to show the selected city and from the second row I need the search functionality. Currently, the first row is a search row. I want something like this
This is my JsFiddle code
<label class="item">City:</label><input list="cities_list" id = "s_city" name = "s_city" placeholder="search..." type="text" onblur ="setCityName();" class="item">
<datalist id="cities_list" class="item">
<option value="Puerto Rico" date-time-zone="America/Puerto_Rico">
<option value="Chicago" date-time-zone="America/Chicago">
<option value="Antigua" date-time-zone="America/Antigua">
<option value="Amsterdam" date-time-zone="Europe/Amsterdam">
<option value="Istanbul" date-time-zone="Europe/Istanbul">
<option value="London" date-time-zone="Europe/London">
<option value="Rome" date-time-zone="Europe/Rome">
<option value="Bangkok" date-time-zone="Asia/Bangkok">
<option value="Hong_Kong" date-time-zone="Asia/Hong_Kong">
<option value="Jakarta" date-time-zone="Asia/Jakarta">
</datalist>
Is there any Javascript or jQuery function I can use to change the behaviour of the datalist. The first row shows the selected city and the second row will be the searchable. Any suggestions would be appreciated.
Here is an approach without plugin.