JQuery UI自动完成:自动高度不尊重maxHeight

Question

我希望我的jQuery UI AutoComplete具有包含可用选项的动态窗口大小,但也要具有最大高度,以便在返回大量选项时它不会占用整个页面.

当我有以下内容时,高度是动态的,但忽略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/)代码.但是,如果您在页面上使用多个自动完成,则必须更改脚本中的某些行.您必须使用"自动完成("小部件")"作为参考.

    $('.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');
}