[ACCEPTED]-JQuery autocomplete result style-autocomplete

Accepted answer
Score: 23

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



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





    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{
Score: 16

I was able to adjust by adding this css 6 to the <head> of the document (above the autocomplete 5 javascript).

Some of the following may be 4 more relevant than others. You could make 3 it specific to the autocomplete input if 2 changing these affects other elements you 1 don't want affected.

<style type="text/css">
 /* http://docs.jquery.com/UI/Autocomplete#theming*/
.ui-autocomplete { position: absolute; cursor: default; background:#CCC }   

/* workarounds */
html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
.ui-menu {
    padding: 2px;
    margin: 0;
    float: left;
.ui-menu .ui-menu {
    margin-top: -3px;
.ui-menu .ui-menu-item {
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
.ui-menu .ui-menu-item a {
    padding:.2em .4em;
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
Score: 3

If you are using the official jQuery ui 9 autocomplete (i'm on 1.8.16) and would like 8 to define the width manually, you can do 7 so.

If you're using the minified version 6 (if not then find manually by matching _resizeMenu), find...

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

...and 5 replace it with (add this.options.width|| before 4 Math.max) ...

_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}

... you can now include a width 3 value into the .autocomplete({width:200}) function 2 and jQuery will honour it. If not, it will 1 default to calculating it.

Score: 2

Just so you know you have two options for 3 optimizing your code:

Instead of this:

$('.ui-autocomplete-input').css('fontSize', '10px');

You 2 can do this:

$('.ui-autocomplete-input').css('fontSize', '10px').css('width','300px');

Or even better you should do 1 this:

$('.ui-autocomplete-input').css({fontSize: '10px', width: '300px'});

More Related questions