如何为数据列表应用滚动条？

Question

我有一个自动完成的数据列表。

如何应用滚动条？

我的HTML代码：

<input list="languages" id="language_id" />
<datalist id="languages" style="visibility:hidden;white-space:nowrap;overflow:scroll;">
  <option value="html">HTML</option>
  <option value="java">Java</option>
  <option value="perl">Perl</option>
  <option value="php">PHP</option>
  <option value="ruby-on-rails">Ruby on Rails</option>
</datalist>

当我双击文本框时，所有单词都会显示。双击时如何隐藏显示的所有单词？

Answer 1

使用Javascript可以制作滚动条，并且您可以在焦点后使用单击来显示datalist上的显示项目。

Answer 2

不幸的是，你无法使用datalist属性做多少。 datalist目前不支持任何CSS样式，并且特定的视觉特性是特定于浏览器的。某些浏览器可能会选择为长列表添加滚动条。

如果这是不可接受的，您可能不得不忘记数据列表并通过Javascript实现ComboBox。我相信JQuery有一个适当的自动完成功能。