DataList控件垂直滾動的鍍鉻

不工作我已經使用DataList控件功能列出我的產品名稱，如果不勝枚舉太長垂直滾動不顯示在谷歌Chrome和一些瀏覽器。是否可以添加css風格的datalist？下面使用代碼：DataList控件垂直滾動的鍍鉻

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

來源

2016-11-23 Vishnu

查看我的筆：HTTP：// codepen。 io/vishnuprasad/pen/LbyBga – Vishnu

如果我的回答幫助您解決了您的問題，請將其標記爲接受的答案以關閉此主題。 – Learner

謝謝.. @Abhay請檢查我的答案。 – Vishnu

-1

我用組合框JavaScript組件來解決這個問題，從：https://www.zoonman.com/projects/combobox/

var no = new ComboBox('cb_identifier');

div.combobox \t {font-family: Tahoma;font-size: 12px} 
 
\t div.combobox \t {position: relative;zoom: 1} 
 
\t div.combobox \t div.dropdownlist \t {display: none;width: 200px; 
 
\t \t border: solid 1px #000;background-color: #fff; 
 
\t \t height: 200px;overflow: auto;position: absolute; 
 
\t \t top: 18px;left: 0px;} 
 
\t div.combobox \t .dropdownlist \t a \t {display: block;text-decoration: none; 
 
\t \t color: #000;padding: 1px;height: 1em;cursor: default} 
 
\t div.combobox \t .dropdownlist \t a.light \t {color: #fff; 
 
\t \t background-color: #007} 
 
\t div.combobox \t .dropdownlist, input {font-family: Tahoma;font-size: 12px;} 
 
\t div.combobox \t input {float: left;width: 182px; 
 
\t \t border: solid 1px #ccc;height: 15px} 
 
\t div.combobox \t span \t {border: solid 1px #ccc;background: #eee; 
 
\t \t width: 16px;height: 17px; 
 
\t \t 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"> 
 
\t <input type="text" name="comboboxfieldname" id="cb_identifier"> 
 

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

 
\t \t <a>Third Item3</a> 
 
\t </div> 
 
</div>

來源

2016-11-29 05:47:11 Vishnu

不適用於我。可能是鉻。 –

不幸的是，不，你不能使用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按預期提供建議。

我希望它能幫助

來源

2016-11-23 12:35:41 Learner

它是否有任何jQuery的嗎？請.. – Vishnu

你想讓我爲你寫jQuery代碼嗎？因爲沒有內置函數或者你想實現的功能。 – Learner

是的。你可以幫幫我嗎？ – Vishnu

DataList控件垂直滾動的鍍鉻

回答

相關問題