相关下拉菜单：数据列表的填充

HTML5 表单的 list 属性/datalist 元素非常酷。当您在文本输入框中键入时，它会显示一个下拉菜单，您可以从中选择。或者您可以输入您想要的任何内容。list 属性本身不会将您锁定到任何特定值。这样，它有点像一组带有“其他”键入选项的单选按钮。

就像这样

<input type="text" id="search" list="states" placeholder="Find U.S. State">
	
<datalist id="states">
  <option value="Alabama">
  <option value="Alaska">
  <!-- All the other states -->
</datalist>

最终呈现为

不幸的是，datalist 的浏览器支持（截至撰写本文时）仅限于 Firefox 4+、Opera 10.6+ 和尚未发布的 IE 10。您可能希望获得 WebKit 支持（以及旧版浏览器支持）来使用此有用功能。所以我制作了这个填充程序。它依赖于 Modernizr 进行检测，并依赖于 jQuery 来使其正常工作。

我在 iOS 5、IE 6+、Chrome（可能所有）和 Safari（可能所有）上使其正常工作。旧版 IE 缺少阴影框，但您可以使用 CSS 以您想要的方式进行样式设置。

与任何填充程序一样，您从正确的最新标记开始，它在旧版浏览器中“正常工作”。此填充程序模拟下拉菜单以及从下拉菜单中选择选项。它具有键盘支持（上下箭头和用回车键选择）并且即使在窗口调整大小后也能正确定位自身。

Safari 需要一个额外的技巧，因为它声称支持 list 属性和 datalist 元素，但实际上它不起作用。因此 Modernizr 检测不正确。由于 Safari 有着这些非常高的浏览器版本号，而其他浏览器都没有，因此我们可以仅使用 jQuery 对其进行测试。

if (!Modernizr.input.list || (parseInt($.browser.version) > 400))

更新 来自 Lee Reamsnyder 的以上内容，以防止更新的 Chrome 出现误报

if (!Modernizr.input.list || (parseInt($.browser.version) > 400 && !window.chrome))

它就是这个样子

查看演示

它并不完美。它应该是一个插件，并在多个输入框上工作。它在 IE 中应该看起来更好。代码可能可以优化。如果您想下载或分叉它，请访问 GitHub。

更新（2012 年 10 月）

修复了 GitHub 链接
更新到 jQuery 1.8
为 jQuery 1.8 更新自定义 :contains 方法