Question

I am using the JQuery library’s autocomplete function and wanted to know how I could CSS style the extra information (description).

i.e. My current results when typing into the input is:
John Smith
http://www.johnsmith.com

I want to make the domain names be styled in a smaller font, italics, and color.
I tried adding this CSS as shown in the example on jquery.com:

#result-description {
    margin: 0;
    padding: 0;
    font-style:italic;
    font-size:3px !important;
}

But no luck!

Any suggestions?

Answer 1

Finally solved it! Have to add a font tag (with class of your styling) to the the .append portion of the autocomplete:

.data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a>" + item.label + "<br><font class=\"description\">" + item.desc + "</font></a>" )
            .appendTo( ul );
    };