jQuery自动完成扩展以占据整个屏幕
我试图在搜索栏中实现一个自动完成框。当我要输入文本时,该框将展开以填充整个屏幕。我有没有办法缩小弹出框的大小?我对jQuery有点陌生,所以我希望这只是我可以设置的一些选项。代码是这样的jQuery自动完成扩展以占据整个屏幕,jquery,user-interface,textbox,jquery-ui-autocomplete,Jquery,User Interface,Textbox,Jquery Ui Autocomplete,我试图在搜索栏中实现一个自动完成框。当我要输入文本时,该框将展开以填充整个屏幕。我有没有办法缩小弹出框的大小?我对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.c
<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>
$(文档).ready(函数(){
var data={%autoescape false%}{{job_names}}{%endautoescape%};
$(“#作业名称”).autocomplete({source:data});
});
需要注意的是,作业名称是通过我的flask/python后端传入的列表。将以下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;
}
谢谢,这是一个巨大的进步,我认为这将引导我朝着正确的方向前进。