[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

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

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 {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}
</style>

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');
$('.ui-autocomplete-input').css('width','300px');

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'});

Source: stackoverflow.com

[ACCEPTED]-JQuery autocomplete result style-autocomplete

Auto complete Appearing behind the Modal popup

Trigger jQuery Autocomplete manually

jQuery UI Autocomplete: Clear Previous Search Term

Google Maps Autocomplete - Clear input if nothing selected

Jquery UI autocomplete; minLength:0 issue

How to remove/change JQuery UI Autocomplete Helper text?

Enabling jQuery Autocomplete on dynamically created input fields

Jquery catching click event on jquery ui autocomplete

Adding a Custom Class to jQuery UI's ui-autocomplete Combobox Div

using jquery-ui autocomplete with multiple input fields