Styling Jquery UI Autocomplete

Styling JQuery UI Autocomplete

Are you looking for this selector?:

.ui-menu .ui-menu-item a{
    background:red;
    height:10px;
    font-size:8px;
}

Ugly demo:

http://jsfiddle.net/zeSTc/

Just replace with your code:

.ui-menu .ui-menu-item a{
    color: #96f226;
    border-radius: 0px;
    border: 1px solid #454545;
}

demo: http://jsfiddle.net/w5Dt2/

Styling jQuery autocomplete

You can use the class .ui-state-focus as the hover state is added automatically on the li when you hover it.

.ui-autocomplete.ui-menu .ui-menu-item.ui-state-focus { background-color: rgba(0,0,0,0.4); }

jquery ui autocomplete multiline results styling

Here this may help.

 $(function() {
        var doctors = [{            label: "Dr Daniel Pound",            department: "Family Medicine, Medicine, Obesity",            address: "3575 Geary Blvd Fl San Francisco CA"        }, {            label: "Dr Daniel Test",            department: "Pediatrics, Pediatric Hematology",            address: "1825 4th St Fl San Francisco CA"        }, {            label: "Dr Daniel Another",            department: "Orthopedics",            address: "1825 4th St Fl San Francisco CA"        }];

        $("#doctor").autocomplete({            minLength: 2,            source: doctors,
            select: function(event, ui) {                $("#doctor").val(ui.item.label);                return false;            }        }).autocomplete("instance")._renderItem = function(ul, item) {            return $("<li class='each'>")                .append("<div class='acItem'><span class='name'>" +                    item.label + "</span><br><span class='desc'>" +                    item.department + "</span><br><span class='desc'>" +                    item.address + "</span></div>")                .appendTo(ul);        };
    });

.each{    border-bottom: 1px solid #555;    padding: 3px 0;    }.acItem .name{  font-size: 14px;  font-family: Arial, Helvetica, sans-serif;}
.acItem .desc{  font-size: 10px;  font-family: Arial, Helvetica, sans-serif;  color:#555;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<body>    <h1>Hello AutoComplete</h1>
    <input id="doctor" type="text" />

</body>

jQuery UI Autocomplete is not styled correctly

Solved with this css

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
    background-color:#fff;
    border: 1px solid #aaaaaa;
    max-height: 200px;

    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}

JQuery Autocomplete : can't apply style on the focused item

I managed to make it work.

For some reason JQuery Autocomplete doesn't apply the ui-state-focus on the focused <li> but does apply the ui-state-active class on the <a> inside the focused <li>. Therefore I can apply the wanted style via

.ui-state-active {
    background-color: red;
    font-weight: bold;
}

I still have no idea why it applies a class only on the <a> inside and not on the <li> as describe on all the documentations but hey, it works...

css formatting of jquery ui autocomplete

Try the even / odd argument of nth-of-type CSS selector:

.ui-menu:nth-of-type(even) li div{  /* black */
  text-align: left !important;
}
.ui-menu:nth-of-type(odd) li div{  /* white */
  text-align: right !important;
}

JQuery autocomplete result style

Information on styling the Autocomplete widget can be found here: http://docs.jquery.com/UI/Autocomplete#theming

Fiddle

HTML

<input type="text" id="auto">

jQuery

$('#auto').autocomplete({'source':
    ['abc','abd','abe','abf','jkl','mno','pqr','stu','vwx','yz']
});

CSS

ul.ui-autocomplete.ui-menu{width:400px}

/* 
    targets the first result's <a> element, 
    remove the a at the end to target the li itself 
*/
ul.ui-autocomplete.ui-menu li:first-child a{
    color:blue;
}

Styling Jquery UI Autocomplete