在我的搜索javascript中创建一个滚动条

Question

我的搜索栏中有一个问题在我的javascript中，因为我在我的表中存储了一个名为tb_applicants的2k +名称....如果我输入f或者它会给我一个很长的名字列表以字母开头我键入...我想要做的是在它上面放一个滚动条，这样就不会像组合框一样长。

当前代码：

<form>
<input type="text" name="search" id="query"/>
</form>
<script type="text/javascript">
$(document).ready(function(){

    $("#query").autocomplete({
        source : 'search.php',
        select : function(event,ui){
            $("#query").html(ui.item.value);
        }
    });

});
</script>

search.php代码：

<?php

$q = $_GET['term'];

mysql_connect("localhost","root","");
mysql_select_db("klayton");
$query = mysql_query("SELECT name 
FROM tb_applicants
WHERE name LIKE '$q%' LIMIT 5");

$data = array();
while($row = mysql_fetch_array($query)){
$data[]=array('value'=>$row['name']);
}
echo json_encode($data);
?>

Answer 1

如果您使用的是jqueryUI插件，则只需按照以下说明设置max-height CSS属性：

http://jqueryui.com/autocomplete/#maxheight

Answer 2

听起来你只能通过定义#query元素的高度或最大高度来完成CSS，并可能将overflow-y设置为auto。

见这里：http://jsfiddle.net/UYpP6/

#query {
    max-height: 100px;
    overflow-y: auto;
}

Answer 3

尝试：

.ui-autocomplete.ui-menu {
    max-height: 150px;
    overflow: auto;
}