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는 내 플라스크/파이썬 백엔드를 통해 전달 된 목록입니다.

Answer 1

HTML 페이지에 다음 CSS를 추가, 그것은 오버 플로우 설정을 적용하고 자동 완성 목록의 폭을 설정합니다 :

/**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/