jQuery自動完成擴展佔用整個屏幕

Question

我試圖在搜索欄中實現一個自動完成框。當我要輸入文本時，該框會展開以填充整個屏幕。有什麼辦法可以減小彈出框的大小？我對jQuery很陌生，所以我希望這只是我可以設置的一些選項。代碼就是這樣。

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    var data = {% autoescape false %}{{job_names}}{% endautoescape %}; 
    $("#job_names").autocomplete({source : data}); 
    }); 
</script> 

<form name= "search_form" method= "post" action= "/" onSubmit="return validate(this);"> 
    <input id="job_names" type= "text"/> 
    <input type= "submit" value= "Search" id= "search"/> 
</form> 

要注意的事情，job_names是通過我的瓶/ Python的後端通過在列表中。

Answer 1

以下CSS添加到您的HTML頁面，它將應用溢出設置，並設置自動完成列表的寬度：

/**causes the autocomplete to align left and overflow with vertical scroll bar **/ 
    ul 
    { 
     text-align:left; 
     width: 150px;   
    } 
    .ui-autocomplete 
    { 
     max-height: 200px; 
     overflow-y: auto; 
     overflow-x: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
    } 

http://jsfiddle.net/sanpopo/4J9tK/