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

时间:2014-02-18 07:10:53

标签: javascript php html mysql ajax

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

enter image description here

当前代码:

<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);
?>

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

尝试:

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