HTML5 datalist tag is not working as expected in Safari

Question

I have a datalist tag which allows my users to have a suggestion box. Now i know that this feature is not supported in safari. So what can i do to solve this issue?

Here is my code - I'm actually populating my values with database dynamically..

<select id="select_departure_city"style="border-radius:6px" onchange="this.nextElementSibling.value = $('#select_departure_city option:selected').text().trim()"></select>
<input id="input_departure_city" class="form-control admin-input width-80 height-34p padding-0" name="departure_city" type="text" list="listDepartureCity" />
<datalist id="listDepartureCity" ></datalist>

Before posting this i tired many solutions but none of them is worked for me. I tired

1. HTML5 datalist tag is not populating in Safari
2. Datalist not working in Safari
3. GitHub Help1
4. GitHub Help2

As in these posts, Select tag with in datalist tag is solution like this.

<datalist id="languages">
<select>
  <option value="JavaScript">JavaScript</option>
  <option value="Haskell">Haskell</option>
</select></datalist>

But in my case Options tag are not place within select tag after populating dynamically. My code after adding select is as below

<datalist id="listDepartureCity">
     <select></select>
     <option value="JavaScript">JavaScript</option>
     <option value="Haskell">Haskell</option>
</datalist>

How can I solve this?

Answer 1

If you need to use a feature that's not widely supported by all browsers, chances are you'll need a polyfill. Here's one for datalist that might work for you: https://github.com/thgreasi/datalist-polyfill