comboBox jQueryUI Autocomplete trop long

Question

Mon ComboBox avec saisie automatique jQuery UI ne comporte pas de barre de défilement à droite et devient très, malheureusement, comme illustré ci-dessous. Je voudrais limiter cette liste à une longueur raisonnable - aucune idée 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

C'est une vieille question, alors que la solution de j08691 fonctionnait bien avec Primefaces, le nom de la classe a maintenant été remplacé par "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

À un moment donné, cela a de nouveau changé. Depuis jQuery-UI 1.12.1, la classe est 'ui-autocomplete.ui-front'. 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 4

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

Answer 5

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");

Answer 6

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

Cela ferait l'affaire. Sans avoir la barre de défilement horizontale.