在文本框的单击事件上触发数据列表选项答案

【问题标题】：trigger datalist options on click event of text box在文本框的单击事件上触发数据列表选项
【发布时间】：2014-04-21 02:24:10
【问题描述】：

如何在点击相应的文本框时显示或触发数据列表选项？我有一个选项为 10 的数据列表。在 chrome 中，会显示一个下拉图标，让用户知道它有一个下拉列表。但在 Firefox 中，图标不可用。因此，用户可能不知道它是一个下拉列表，只是一个文本框。所以我想在单击该文本框时显示数据列表选项。任何帮助表示赞赏。

【问题讨论】：

标签： jquery html html-datalist

【解决方案1】：

也许解决方案可能是这样 (Fiddle)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input::-webkit-calendar-picker-indicator {
  display: none;/*remove default arrow in Chrome*/
}
.required:after {
    content: url(http://s25.postimg.org/6k40u5hcr/arrow.png);
    margin-left: -20px; 
    padding: .1em;
    pointer-events:none;/*make png cliccable*/
}
</style>
</head>
<body>
    <span class="required"><input id="team" list="bestTeam"></span>
     <datalist id="bestTeam">
       <option value="Inter">
       <option value="Milan">
       <option value="Juve">
       <option value="Roma">
     </datalist>
   </body>
</html>

首先，我使用 input::-webkit-calendar-picker-indicator 删除了 chrome 中的默认箭头
在后元素中，我在内容属性中设置了一个小图像
使图像可点击使用 pointer-events:none
此解决方案适用于最新版本的 Chrome、firefox 和 IE
如果此解决方案不适合您的需求，我很抱歉让您浪费时间。

【讨论】：

【解决方案2】：

这是浏览器内置的功能，不能修改。此外，Safari 不支持低于 12.1 的版本或更低版本的 IE10 中的 datalist

为了完成这个功能，请使用这个 polyfill：webshim。这将为 Safari 和 IE 提供功能支持，并将 datalist 转换为常规的 ul 列表，然后您可以轻松附加事件以显示/隐藏列表，而不会丢失自动完成功能。

【讨论】：