HTML5 datalist标记在Safari中无法正常工作

Question

我有一个datalist标签，允许我的用户有一个建议框。现在我知道Safari中不支持此功能。那么我该怎么做才能解决这个问题呢？

这是我的代码 - 我实际上是动态地用数据库填充我的值。

<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>

在发布这个之前我厌倦了很多解决方案，但没有一个能为我工作。我累了

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

与在这些帖子中一样，选择带有datalist标签的标签就是这样的解决方案。

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

但在我的情况下，动态填充后，选项标签不会放在select标签内。添加select后我的代码如下

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

请帮我解决这个问题..

提前致谢..

Answer 1

如果您需要使用并非所有浏览器都广泛支持的功能，您可能需要使用polyfill。这是一个可能适合你的datalist：https://github.com/thgreasi/datalist-polyfill