datalist垂直滚动在chrome中不起作用答案

【问题标题】：datalist vertical scroll not working in chromedatalist垂直滚动在chrome中不起作用
【发布时间】：2018-12-19 17:03:14
【问题描述】：

我已使用 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>

【问题讨论】：

查看我的笔：codepen.io/vishnuprasad/pen/LbyBga
如果我的回答帮助您解决了问题，请将其标记为已接受的答案以关闭此主题。
谢谢.. @Abhay 请检查我的答案。
这里有一个开放的错误（投票！）bugs.chromium.org/p/chromium/issues/detail?id=375637
这已在 Chrome 69 中得到修复：bugs.chromium.org/p/chromium/issues/detail?id=773041

标签： javascript jquery html css

【解决方案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);

【讨论】：

【解决方案2】：

很遗憾，您不能将overflow-y 属性用于datalist。您必须编写 jQuery 代码来实现它或至少显示所有可能的值。

我为你写了一个小例子，希望它能帮助你自己完成它：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
  #options{
    display: none;
    height: 300px;
    text-align: center;
    border: 1px solid red;
    overflow-y:scroll;
  }
  #options>p{
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
    </style>
</head>
<body>
<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>

  </datalist>

  <input type="submit">

  <div id="options">
  </div>

</form>
<div class="med_rec"></div>
<script>
$('#browsers option').each(function(){
  $('#options').append('<p>'+$(this).val()+'</p>');
})

$('#options').css({'width':$('input[name="browser"]').width()});
    $('input[name="browser"]').click(function(){
         $('#options').show();
    });
  $('input[name="browser"]').keyup(function(){
    $('#options').hide();
  });
  $('#options p').click(function(){
    $('input[name="browser"]').val($(this).text());
    $('#options').hide();
  })
</script>
</body>
</html>

它实际上创建了第二个选项列表供您选择，其中可滚动，如果用户在输入框中键入，则 datalist 会按预期工作以提供建议。

希望对你有帮助

【讨论】：

你要我为你写jquery代码吗？因为没有内置功能或您想要实现的功能。
是的。你能帮帮我吗？
这对解决这个问题没有帮助。

【解决方案3】：

我已经使用 ComboBox Javascript 组件解决了这个问题，来自：https://www.zoonman.com/projects/combobox/

var no = new ComboBox('cb_identifier');

div.combobox {
  font-family: Tahoma;
  font-size: 12px
}

div.combobox {
  position: relative;
  zoom: 1
}

div.combobox div.dropdownlist {
  display: none;
  width: 200px;
  border: solid 1px #000;
  background-color: #fff;
  height: 200px;
  overflow: auto;
  position: absolute;
  top: 18px;
  left: 0px;
}

div.combobox .dropdownlist a {
  display: block;
  text-decoration: none;
  color: #000;
  padding: 1px;
  height: 1em;
  cursor: default
}

div.combobox .dropdownlist a.light {
  color: #fff;
  background-color: #007
}

div.combobox .dropdownlist,
input {
  font-family: Tahoma;
  font-size: 12px;
}

div.combobox input {
  float: left;
  width: 182px;
  border: solid 1px #ccc;
  height: 15px
}

div.combobox span {
  border: solid 1px #ccc;
  background: #eee;
  width: 16px;
  height: 17px;
  float: left;
  text-align: center;
  border-left: none;
  cursor: default
}

<script type="text/javascript" charset="utf-8" src="https://www.zoonman.com/projects/combobox/combobox.js"></script>

<div class="combobox">
  <input type="text" name="comboboxfieldname" id="cb_identifier">

  <span>▼</span>
  <div class="dropdownlist">
    <a>Item1</a>
    <a>Second Item2</a>

    <a>Third Item3</a>
  </div>
</div>

【讨论】：