javascript - HTML5 datalist 标签在 Safari 中无法按预期工作

Question

我有一个数据列表标签，它允许我的用户有一个建议框。现在我知道 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 标签的 Select 标签就是这样的解决方案。

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

但就我而言，动态填充后，Options 标签未放置在 select 标签内。添加选择后我的代码如下

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

我该如何解决这个问题？

Answer 1

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