How to fix jQuery UIs autocomplete width

I recently noticed that the combobox item on an jQuery UI autocomplete grows way beyond the textfield input which is kinda ugly.

This is how i fix it (that is, make it as width as the input item):

$.extend($.ui.autocomplete.prototype.options, {
	open: function(event, ui) {
		$(this).autocomplete("widget").css({
            "width": ($(this).width() + "px")
        });
    }
});

This code applies it to every autocomplete.

16 comments

Post a comment | Trackback URI | RSS 2.0 feed for those comments

Richard wrote:

Beautiful. Thanks a million, Michael. How I hated that ul stretch beyond the page limits…

Posted on January 14, 2014 at 8:54 PM | Permalink
Michael wrote:

Thanks Richard for your kind feedback, highly appreciated.

Posted on January 15, 2014 at 10:05 AM | Permalink
Ed Szwedo wrote:

Thanks so much! I had copied the demo code exactly and was surprised to see the drop down menu extend all the way across the page.

Posted on April 1, 2014 at 4:40 PM | Permalink
Alan wrote:

Where did you put this code though? Thanks!

Posted on June 19, 2014 at 11:05 PM | Permalink
Michael wrote:

I put in the global scope before doing anything with JQuery. But i guess $(document).ready should work, also.

Posted on June 19, 2014 at 11:23 PM | Permalink
Ivan wrote:

It saved my time. Many thanks!

Posted on July 27, 2015 at 9:20 PM | Permalink
Ardegedi wrote:

Thanks!

Posted on September 21, 2015 at 10:58 AM | Permalink
Yasir Siddiqui wrote:

Thanks, you are a life saver.

Posted on February 9, 2016 at 9:25 AM | Permalink
garudacrafts wrote:

Thanks, excellent solution. I used “$(this).outerWidth()” in place of “$(this).width()” to get the width plus padding.

Posted on February 22, 2016 at 4:42 AM | Permalink
Georgios wrote:

Thank you so much!!! Your solution with the combination of garudacrafts ‘s comment saved me !

Posted on May 8, 2016 at 10:09 PM | Permalink
Roland Wales wrote:

Thank you, very helpful!

Posted on August 3, 2016 at 6:28 PM | Permalink
Michael wrote:

You’re welcome!

Posted on August 4, 2016 at 8:50 AM | Permalink
Jack wrote:

Hi Michael,

That’s great and solved my problem…almost…the autocomplete gets resized but the text now won’t wrap. Any advice?

Cheers.

Posted on March 13, 2017 at 9:55 PM | Permalink
GV wrote:

Thank you, worked like a charm

Posted on January 29, 2019 at 7:01 AM | Permalink
jenny wrote:

Thanks a lot.

Posted on February 18, 2019 at 2:05 PM | Permalink
Joji wrote:

Thanks for this wonderful solution 🙂

Posted on January 20, 2020 at 2:16 AM | Permalink

One Trackback/Pingback

是否可以设置jQuery自动完成组合框的宽度？|jquery问答 on January 6, 2021 at 2:32 AM

[…] 感谢Michael Simons https://info.michael-simons.eu/2013/05/02/how-to-fix-jquery-uis-autocomplete-width/ […]

Post a Comment

Name *

Email *

Website

Sum of one + five ? *

Comment

Your email is never published. We need your name and email address only for verifying a legitimate comment. For more information, a copy of your saved data or a request to delete any data under this address, please send a short notice to michael@simons.ac from the address you used to comment on this entry.
By entering and submitting a comment, wether with or without name or email address, you'll agree that all data you have entered including your IP address will be checked and stored for a limited time by Automattic Inc., 60 29th Street #343, San Francisco, CA 94110-4929, USA. only for the purpose of avoiding spam. You can deny further storage of your data by sending an email to support@wordpress.com, with subject “Deletion of Data stored by Akismet”.
Required fields are marked *

info.michael-simons.eu