JQueryUI автозаполнение ComboBox слишком долго

Question

Мой ComboBox с автозаполнением jQuery UI не имеет полосы прокрутки с правой стороны и выглядит очень, к сожалению, долго, как показано ниже.Я хотел бы ограничить этот список разумной длиной - есть мысли о том, как это можно сделать?Спасибо!

Answer 1

Вы можете установить высоту с помощью CSS:

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

Answer 2

Это старый вопрос, поэтому, хотя решение j08691 нормально работало со старыми Primefaces, теперь имя класса изменилось на "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;
}

Answer 3

В какой-то момент это снова изменилось, так как в jQuery-UI 1.12.1 класс является 'ui-autocomplete.ui-front', поэтому принятый ответ становится:

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

Answer 4

Начните изучать CSS.Скорее всего, выпадающий список является выбором или ул.Если раскрывающийся список заключен в DIV, добавьте «overflow: auto», и появится полоса прокрутки.Или установите максимальную высоту в div.Другим решением будет ограничение результатов.Только не заполняйте коробку таким количеством записей.

Answer 5

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

Это бы сработало. Без горизонтальной полосы прокрутки.

Answer 6

Создайте собственное расширение и добавьте необходимые методы:

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

    },
});

Пример использования:

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