Сделать полосу прокрутки в моем поиске javascript

Question

У меня проблема в моей строке поиска в моем javascript, потому что у меня есть 2k + имена, хранящиеся в моей таблице, называемые tb_applicants .... если я набираю f или что-то, что это даст мне очень длинный список имен, начинающийся с буквы i типа ... я хочу сделать, это поместить на нее полосу прокрутки, чтобы она не была длинной, как combobox.

текущий код:

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