Question

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

＆＃13;

<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>

＆＃13;

Answer 1

不幸的是，不，您不能将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按预期工作以提供建议。

我希望它有所帮助

Answer 2

有一个简单的解决方案。使用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);

Answer 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>

datalist垂直滚动不在chrome中工作

3 个答案: