javascript - 数据列表垂直滚动在 Chrome 中不起作用

Question

我使用datalist功能列出我的产品名称，如果列表太长垂直滚动不显示在谷歌浏览器和某些浏览器中。是否可以在 datalist 的 css 样式中添加 overflow-y:scroll ？使用的代码如下:

<form action="demo_form.asp" method="get">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="a"></option>
    <option value="b"></option>
    <option value="c"></option>
    <option value="d"></option>
    <option value="e"></option>
    <option value="f"></option>
    <option value="g"></option>
    <option value="h"></option>
    <option value="i"></option>
    <option value="j"></option>
    <option value="k"></option>
    <option value="l"></option>
    <option value="m"></option>
    <option value="n"></option>
    <option value="o"></option>
    <option value="p"></option>
    <option value="q"></option>
    <option value="r"></option>
    <option value="s"></option>
    <option value="t"></option>
    <option value="u"></option>
    <option value="v"></option>
    <option value="w"></option>
    <option value="x"></option>
    <option value="y"></option>
    <option value="z"></option>
    <option value="abc"></option>
    <option value="def"></option>
    <option value="ghi"></option>
    <option value="jkl"></option>
    <option value="mno"></option>
    <option value="pqrs"></option>
    <option value="tuv"> </option>
  </datalist>
  <input type="submit">

</form>

Answer 1

对此有一个简单的解决方案。使用https://github.com/b3n/datalist插件。

示例:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="YOURBASE_JS_PATH/src/datalist.js"></script>

var maxHeight = '200px';
var openOnClick = true;
$('input[list]').datalist(maxHeight, openOnClick);