2

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;
}
4

4 に答える 4

8

コードには 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');
}
于 2012-09-25T14:24:20.860 に答える
2

ここでの基本的な考え方は、オートコンプリート ウィジェットのコンテンツが をオーバーフローしている場合にのみheightorを適用することです。これは、次の方法で検出できます。max-heightwindow

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

于 2012-07-03T00:51:15.963 に答える
2

高さを入れないでください max-height を入れるだけでうまくいきます

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

}

于 2014-01-13T06:48:59.530 に答える