Alternating style on Autocomplete
I'd like to propose adding a CSS class to alternating items in the autocomplete menu. Makes it easier to see when you have many items or items with long text.
Add the following line to the autocomplete "refresh" function:
- this.element.children("li.ui-menu-item:odd a").addClass("ui-menu-item-alternate");
And the following CSS definitions:
- .ui-autocomplete li.ui-menu-item {
- padding: 1px; // needed to prevent the item sizes from changing on hover
- }
- .ui-autocomplete a.ui-menu-item-alternate {
- background-color: White; // alternate item bgcolor
- }
- .ui-autocomplete a.ui-state-hover {
- font-weight: normal !important; // rather not bold the hover item (changes the width)
- }