How to fix jQuery UIs autocomplete width

May 2, 2013 by Michael

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) {
            "width": ($(this).width() + "px")

This code applies it to every autocomplete.


  1. 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
  2. Michael wrote:

    Thanks Richard for your kind feedback, highly appreciated.

    Posted on January 15, 2014 at 10:05 AM | Permalink
  3. 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
  4. Alan wrote:

    Where did you put this code though? Thanks!

    Posted on June 19, 2014 at 11:05 PM | Permalink
  5. 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
  6. Ivan wrote:

    It saved my time. Many thanks!

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


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

    Thanks, you are a life saver.

    Posted on February 9, 2016 at 9:25 AM | Permalink
  9. 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
  10. 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
  11. Roland Wales wrote:

    Thank you, very helpful!

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

    You’re welcome!

    Posted on August 4, 2016 at 8:50 AM | Permalink
  13. 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?


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

    Thank you, worked like a charm

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

    Thanks a lot.

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

    Thanks for this wonderful solution 🙂

    Posted on January 20, 2020 at 2:16 AM | Permalink
One Trackback/Pingback
  1. […] 感谢Michael Simons […]

Post a 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 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, with subject “Deletion of Data stored by Akismet”.
Required fields are marked *