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是通过我的flask / 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/

jQuery自动完成功能扩展到整个屏幕

1 个答案: