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

Question

我在我的JavaScript中的搜索栏中有一个问题，因为我有一个2k +名称存储在我的表中，名为tb_applicants ....如果我键入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的插件，你只需要设置的最大高度CSS属性的解释为：与

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

Answer 2

听起来像是你可以在CSS中做到这一点只有通过定义高度或最大高度到您的#query元素，并可能将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; 
}