JQuery UI 자동 완성 : 자동 높이가 maxHeight를 준수하지 않습니다.

Question

jQuery UI 자동 완성에 사용 가능한 옵션이 포함 된 동적 창 크기를 갖길 원하지만 많은 옵션이 반환 될 때 최대 높이를 갖게하고 싶습니다. 전체 페이지를 차지하지 않습니다. 나는 다음이있을 때

, 높이가 동적 만의 maxHeight는 무시됩니다 : 나는 다음이있을 때

.ui-autocomplete { 
    height: auto; 
    max-height: 250px; 
    overflow-y: auto; 
    width:auto; 
} 

는, 높이가 동적 아니라의 maxHeight 작동 :

.ui-autocomplete { 
    height: 250px; 
    max-height: 250px; 
    overflow-y: auto; 
    width:auto; 
} 

Answer 1

필자는 TJ의 훌륭한 예제 (http://jsfiddle.net/s6XTu/12/)를 사용했다. 그러나 페이지에서 여러 자동 완성을 사용하는 경우 스크립트의 일부 줄을 변경해야합니다. 참조로 "autocomplete ("widget ")"을 사용해야합니다.

$('.ui-autocomplete').css('height', 'auto'); 
var $input = $(event.target), 
    inputTop = $input.offset().top, 
    inputHeight = $input.height(), 
    autocompleteHeight = $input.autocomplete("widget").height(), // changed 
    windowHeight = $(window).height(); 
if((inputHeight + autocompleteHeight) > (windowHeight - inputTop - inputHeight)) { 
    $('.ui-autocomplete').css('height', (windowHeight - inputHeight - inputTop - 20) + 'px'); 
} 

Answer 2

기본을 자동 완성 위젯의 내용이 window을 오버플로하는 경우에만 height 또는 max-height을 적용하는 것이 좋습니다. 다음에 이것을 감지 할 수 있습니다 : 당신은 또한 ui-autocomplete의 내용이 컨테이너에 맞지 않는 경우 스크롤 막대가 표시되도록 overflow을 설정해야합니다 CSS에서

//Reset the height so the true height can be calculated. 
$('.ui-autocomplete').css('height', 'auto'); 

//Get some values needed to determine whether the widget is on 
//the screen 
var $input = $('#the-id-of-the-input-node'), 
    inputTop = $input.offset().top, 
    inputHeight = $input.height(), 
    autocompleteHeight = $('.ui-autocomplete').height(), 
    windowHeight = $(window).height(); 

//The widget has left the screen if the input's height plus it's offset from the top of 
//the screen, plus the height of the autocomplete are greater than the height of the 
//window. 
if ((inputHeight + inputTop + autocompleteHeight) > windowHeight) { 

    //Set the new height of the autocomplete to the height of the window, minus the 
    //height of the input and the offset of the input from the top of the screen. The 
    //20 is simply there to give some spacing between the bottom of the screen and the 
    //bottom of the autocomplete widget. 
    $('.ui-autocomplete') 
     .css('height', (windowHeight - inputHeight - inputTop - 20) + 'px'); 
} 

.

.ui-autocomplete { overflow: auto; } 

여기에 이것을 보여주는 라이브 예가 있습니다. http://jsfiddle.net/s6XTu/12/입니다.

Answer 3

은 그나마 당신이 작업을해야 무슨

.ui-autocomplete { 
position: absolute; 
top: 0; 
left: 0; 
cursor: default; 
max-height: 145px; 
overflow-y: auto; 
overflow-x: hidden; 

}