javascript - 以编程方式使 input[type=url] 的数据列表出现在 JavaScript 中

Question

在 Chrome 中，目前 Datalist 仅在键入或双击input元素时出现，例如http://jsfiddle.net/r7Y4v/

我正在尝试使数据列表更快出现。理想情况下，我会在输入旁边放一个小“下拉箭头”，单击它会使 Datalist 出现。

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

Answer 1

我在规范中找不到如何执行此操作的任何内容。

我还注意到当前浏览器中的实现似乎有很大差异（单击与 dbl-click、箭头键、完整与过滤列表以及过滤器如何匹配部分输入等）。

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

所以看起来你现在最好自己滚动或使用现成的库。
在我看来，“ minimul datalist ”库相当受欢迎（阅读的好链接）。
在该页面上是指向它的GitHub 代码和演示页面的链接。

旁注： 我希望有人给出更好的答案！另外，起初我认为省略箭头按钮是个好主意，这样如果人们想要一个可以连接到数据列表/自动完成/组合框的下拉按钮，他们可以有更好的样式选项。我很惊讶所有这一切似乎仍然未指定并且不受本机支持。规范编写者，请给我们简单的原生组合框（过期了这么久），然后添加类似香料的过滤器！

---

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

• 问题 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;
}