用JavaScript编程地使输入[type=url]的datalist出现

Question

在Chrome中，到目前为止，数据列表仅在输入或双击input元素时出现，例如http://jsfiddle.net/r7Y4v/

我想让数据学家早点出现。理想情况下，我会在输入旁边放一个小的"下拉箭头"，当点击时，数据列表就会出现。

我正在寻找一个webkit解决方案。

Answer 1

我在规范中找不到如何做到这一点。

我还注意到当前浏览器的实现似乎有很大的不同(点击vs点击，箭头键，完整vs过滤列表以及过滤器如何匹配部分输入等)。

对我来说，似乎现在有仍然没有正常工作的组合框和数据列表似乎还处于起步阶段。

所以看起来你现在最好是使用自己的库或使用现成的库。
在我看来，"最小数据"库是相当受欢迎的(很好的阅读链接)。
在这个页面上有一个链接到它的GitHub代码和一个演示页面。

旁注: 我希望有人能给出更好的答案!而且，一开始我认为去掉箭头按钮是个好主意，这样如果人们想要一个可以连接到数据列表/自动完成/组合框的下拉按钮，他们就可以有更好的样式选择。令我惊讶的是，这一切似乎仍未得到明确说明，也未得到本机支持。请，规范作者，给我们简单的本地组合框(这是这么久以来)，然后添加香料，如过滤器!

---

编辑:自2012年8月以来，Chromium项目有一个开放的功能请求，要求下拉功能:

• Issue 152375:在带有datalist的输入标签上添加下拉开关

Answer 2

这样怎么样?由于Chrome确实在悬停时放置了一个图标，所以我放置了这个图像，这样它就会在同一个位置。

input[list]{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAYAAADtj3ZXAAAAB3RJTUUH3wMHFxkH6cbPfQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAABaSURBVHjaY2RgYDAA4jkMxIEsID6FLrgOiP8TwNNwmSgNxJ/xaDwPxGz4nJSDQ+MHIFYn5B9mqA3omsOJDA9w4P1B0jiTWI0wMIFYf2IDPEB8gxh/4jOAIAAAbfwl/FxzevIAAAAASUVORK5CYII=');
background-repeat:no-repeat;
background-position:right;
background-origin: content-box;
}