基本如果自动填充小部件的内容溢出window
,则此处的想法仅应用height
或max-height
。你可以用下面这个检测:
//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');
}
在CSS中,你还需要设置overflow
,这样滚动条时ui-autocomplete
的内容在其容器不适合出现。
.ui-autocomplete { overflow: auto; }
我有一个现场示例显示此处 - http://jsfiddle.net/s6XTu/12/。
你有什么应该是工作。我可以在jQuery演示页面上重现结果。我的猜测是某处出现CSS冲突。检查你的浏览器开发工具以确保CSS得到应用。尝试添加!对于高度规则来说很重要(只是为了测试,修正CSS,不要把它放在重要的位置)。 – BZink
如果您需要避免元素在页面上熄灭:您可以尝试:位置:{my:“left top”,at:“left bottom”,collision:“flipfit”},在自动完成函数中:https:// api。 jqueryui.com/autocomplete/#option-position –