Question

I am new to jquery ui autocomplete!

I found that the popup suggestion’s width just like the input field which binded with autocomplete plugin,but my contents in suggestions may be longer than the width of suggestions popup list window. It was obviously that the width and position was calculate by the autocomplete plugin,so,is there a way to setting the width of popup suggestions to auto fit the width of my contents?

thank you very much~~!!

Answer 1

Try hooking into the open event provided by the Autocomplete widget. There, you can get a reference to the div that contains the suggestions and set it’s width.

e.g. The following code worked for me just adding it using Firebug on the page linked above:

$( "#tags" ).bind( "autocompleteopen", function(event, ui) {
    var $suggestionsDiv = $(event.target).autocomplete('widget');
    $suggestionsDiv.css('width', 'auto'); // may not work cross browser
});

As noted in the comments, this may not be 100% cross browser compatible (I often have trouble with IE respecting width: auto, especially dynamically after the page has loaded), but you get the idea.