jQueryUI Autocomplete ComboBox Too Long

问题

My jQuery UI AutoComplete ComboBox doesn't have a scrollbar on the right side and gets very, unfortuantely, long as shown below. I'd like to restrain this list to a reasonable length - any thoughts on how that might be accomplished? Thanks!

回答1:

You can set the height 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;
}

回答2:

This is an old question, so while the solution by j08691 worked fine with older Primefaces, now the class name has changed to "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;
}

回答3:

At some point this has changed again, as of jQuery-UI 1.12.1 the class is 'ui-autocomplete.ui-front' so the accepted answer becomes:

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

回答4:

Start looking into the CSS. Most likely the drop down list is a select or ul. If the drop down is enclosed within a DIV, add "overflow:auto", that will give it a scroll bar. Or set the max height to the div. Another solution would be putting a limit on the results. Just don't populate the box with that many entries.

回答5:

Create your own extension and add the required methods:

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

    },
});

Sample usage:

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

回答6:

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

This would do the trick. Without having horizontal scroll bar.

来源：https://stackoverflow.com/questions/9182766/jqueryui-autocomplete-combobox-too-long

标签

jquery-ui

autocomplete

combobox