Question

I would like my jQuery UI AutoComplete to have the dynamic window size containing the available options, but also to have a max height so that when there are a large number of options returned it does not take up the whole page.

When I have the following, the height is dynamic but maxHeight is ignored:

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

When I have the following, the height is not dynamic but maxHeight works:

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

Answer 1

I used TJ’s great example (http://jsfiddle.net/s6XTu/12/) for my code. But if you are using multiple autocomplete on your page you have to change some lines in the script. You have to use the “autocomplete(“widget”)” as reference.

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