jQueryUI Autocomplete ComboBox trop long

Question

Mon jQuery UI AutoComplete ComboBox n'a pas de barre de défilement sur le côté droit et devient malheureusement très long comme indiqué ci-dessous. J'aimerais limiter cette liste à une longueur raisonnable - des idées sur la façon dont cela pourrait être accompli ? Merci!

Answer 1

Vous pouvez définir la hauteur via 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

À un moment donné, cela a encore changé, à partir de jQuery-UI 1.12.1, la classe est 'ui-autocomplete.ui-front', donc la réponse acceptée devient :

 .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 3

Commencez à regarder dans le CSS. Très probablement, la liste déroulante est un select ou un ul. Si la liste déroulante est entourée d'un DIV, ajoutez "overflow:auto", cela lui donnera une barre de défilement. Ou définissez la hauteur maximale sur le div. Une autre solution serait de limiter les résultats. Ne remplissez pas la boîte avec autant d'entrées.

Answer 4

Créez votre propre extension et ajoutez les méthodes requises :

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

    },
});

Exemple d'utilisation :

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