jquery-autocomplete (standalone) set width

I'm happily using this autocompleter: http://code.google.com/p/jquery-autocomplete/.

I need to change the width of the generated ul list, but can't do it through CSS:

.acResults {
    width: 348px;
}

it seems that the width is set in javascript every time a result is generated as:

$('.acResults').width(开发者_如何学运维348);

works, but only once (overwritten after typing). I've tried using the above function in both "showResult" and "onItemSelect", but both are overwritten immediately afterwards.

Thanks in advance.

You can fix the style using !important although it's not a good practice. Example:

.acResults {
    width: 348px !important;
}

Just remove (or alter) the lines in your local copy of the plugin that set the width of the list, i.e.:

extraWidth = this.dom.$results.outerWidth() - this.dom.$results.width();
this.dom.$results.width(this.dom.$elem.outerWidth() - extraWidth);

You could change it to:

this.dom.$results
    .width(Math.max(this.dom.$elem.outerWidth() - extraWidth, 348));

If you're using the minified version, grab the unminified version, alter it, and run it through your minifier of choice.

Alternatively, you could create a patch that takes in a minimum list width option and submit it to dylan.verheul or submit a new feature request on the issues page perhaps.

just increase the width of the 'ac_results' and it will hide the y-overflow

.ac_results ul {
width: 180px;
/* 
increase width to hide overflow
*/
list-style-position: outside;
list-style: none;
padding: 0;
margin: 0;

}