Safari中没有填充HTML5 datalist标记

Question

Safari中没有填充HTML5 datalist标记

R D*_*abh 23 javascript css safari html5

我有一个datalist标签,允许我的用户有一个建议框.但是,我注意到Safari中不支持此功能.这个问题有解决方法吗？

这是我的代码 - 我实际上是用ajax方法填充我的值,但这是它填充后的样子:

<datalist id="languages">
    <option value="HTML">
    <option value="CSS">
    <option value="JavaScript">
    <option value="Java">
    <option value="Ruby">
    <option value="PHP">
    <option value="Go">
    <option value="Erlang">
    <option value="Python">
    <option value="C">
    <option value="C#">
    <option value="C++">
</datalist>

Search: 
<input type="text" list="languages">

Run Code Online (Sandbox Code Playgroud)

我这里也有一个小提琴

Answer 1

Dav*_*itt 27

Safari和/或旧版浏览器的HTML5 datalist解决方法

2017年1月更新

iOS或桌面Safari仍然不支持datalist,到目前为止还没有迹象表明这种变化.所以这是一个黑客使它似乎解决了这个问题.克里斯·科伊尔(Chris Coyier)也曾在2011年参加过数据主义的polyfill.我们希望Safari能够在未来实施现有的W3C建议书.

原帖:

您可以使用一个select元素里面datalist,并复制option标记值在这些可读文本.例如:

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
  <style>
    input[list="languages"] {
      width: 12em;
      border: none;
      background: #eee;
    }
    select {
      width: 12em;
      margin: 0;
      margin-left: -12.75em;
    }
  </style>
</head>
<body>

Choose: <input type="text" list="languages">
<label for="languages">
  <datalist id="languages">
    <select>
      <option value="JavaScript">JavaScript</option>
      <option value="Haskell">Haskell</option>
      <option value="Ruby">Ruby</option>
      <option value="Go">Go</option>
      <option value="Python">Python</option>
      <option value="etc">etc</option>
    </select>
  </datalist>
</label>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

支持浏览器只显示datalist,Safari和旧浏览器将显示option标签的innerHTML.该input标签有一个默认的边界上,在Safari很糟糕的背后select因素,但在这个例子中,如图一点点的造型,让您可以Safari的缺乏支持并保持相同的功能外观.无需Javascript和/或polyfill.

为了澄清,Safari将在输入前面显示一个选择元素.它不会与数据列表具有相同的行为,您可以在其中输入任意输入或从建议列表中进行选择. (3认同)
恕我直言最好的方法(未来的HTML 6？)将只有**<select>**标签,其新属性类似于**editable ="true"**以允许编辑和新属性如**filterable ="true"**允许在打字时进行过滤.虽然**<datalist>**标签可用于在多个选择之间共享选项.但这一切都是另一个故事,只是希望未来开发w3c html 6标准......**<select>**标签实际上是"逻辑/一致/自然"标签,有一个可选择的选项列表在里面.**<input type ="text">**不是正确的方法. (2认同)

Answer 2

Tim*_*orn 22

Safari不支持Datalist元素. http://caniuse.com/#feat=datalist

https://github.com/thgreasi/datalist-polyfill可能有助于实现这一目标.看起来代码支持不支持数据列表的浏览器. (8认同)

Answer 3

Geo*_*rge 9

我意识到它有点晚了,但是,对于那些想要在Safari上模仿datalist的解决方案而不是用select替换它的人:

https://github.com/Fyrd/purejs-datalist-polyfill

基本上你可以在你的html中包含一个短而甜的.js和.css,它使得数据列表链接输入在Safari和Opera mini上的行为与在Chrome,Firefox和Android浏览器上的行为相同.

Answer 4

Mot*_*ine 5

从Safari 12.1开始，现在终于支持数据列表。请参阅Apple发行说明。

似乎mdn 建议的polyfill的开发人员保持最新状态：

更新：Safari TP至少基本上支持datalist元素，并且其功能将包含在适用于iOS和MacOS X的Safari的下一版本中。令人兴奋的消息！我打算尽快发布一个新的主要版本，以期为他们的实现欢呼并适应他们的实施

归档时间：	10 年，10 月前
查看次数：	40139 次
最近记录：	6 年，6 月前