jQueryUI Autocomplete ComboBox Too Long

Jest to stare pytanie, więc podczas gdy rozwiązanie j08691 działało dobrze ze starszymi krokami pierwotnymi, teraz nazwa klasy została zmieniona na"Ui-autocomplete-list":

.ui-autocomplete-list {
    max-height: 400px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}

W pewnym momencie to się zmieniło ponownie, od jQuery-UI 1.12.1 klasa jest ' UI-autocomplete.ui-front ' więc akceptowana odpowiedź staje się:

.ui-autocomplete.ui-front {
    max-height: 600px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}

Zacznij szukać w CSS. Najprawdopodobniej lista rozwijana to select lub ul. Jeśli rozwijana lista jest zamknięta w DIV, dodaj "overflow:auto", co da mu pasek przewijania. Lub ustawić maksymalną wysokość do div. Innym rozwiązaniem byłoby ograniczenie wyników. Po prostu nie wypełniaj pola tak wieloma wpisami.

Utwórz własne rozszerzenie i dodaj wymagane metody:

$.widget("custom.combobox",
$.custom.combobox,
{
    //Extension metod to add custom css to input
    addInputCss: function (css) {
        this.input.addClass(css);
    },

    //Extension metod to add custom css to menu (opened select list)
    addMenuCss: function (css) {
        $(this.input.autocomplete("instance").menu.element).addClass(css);

    },
});

Przykładowe użycie:

$("#yourSelectId").combobox().combobox("addInputCss","yourInputCss").combobox("addMenuCss","yourMenuCss");

.ui-autocomplete {
    overflow-y: auto;
    height: 300px;
    overflow-x: hidden;
}