jQuery UI Autocomplete Width Not Set Correctly

I have implemented a jQuery UI Autocomplete box, and rather than being the width of the textbox, the dropdown options are expanding to fill the remaining width of the page.

Have a look at this example to see it for yourself: http://jsbin.com/ojoxa4

I have tried setting the width of the list immediately after creating it, like so:

$('.ui-autocomplete:last').css('width',
                               $('#currentControlID').width()
                              );

This appears to do nothing.

I have also tried setting the width using on-page styles:

ui-autocomplete { width: 500px; }

This DOES work, amazingly, however it would mean that all autocompletes on a page wou开发者_C百科ld have to be the same width, which is not ideal.

Is there a way to set the width of each menu individually? Or better, can anyone explain why the widths are not working correctly for me?

I use this drop-in solution:

jQuery.ui.autocomplete.prototype._resizeMenu = function () {
  var ul = this.menu.element;
  ul.outerWidth(this.element.outerWidth());
}

That's basically @madcapnmckay's solution, but that doesn't need to change the original source.

It turns out the problem is that the menu is expanding to fill the width of its parent element, which by default is the body. This can be corrected by giving it a containing element of the correct width.

First I added a <div> like so:

<div id="menu-container" style="position:absolute; width: 500px;"></div>

The absolute positioning allows me to place the <div> immediately after the input without interrupting the document flow.

Then, when I invoke the autocomplete, I specify an appendTo argument in the options, causing the menu to be appended to my <div>, and thus inherit its width:

$('#myInput').autocomplete({ source: {...}, appendTo: '#menu-container'});

This fixes the problem. However, I'd still be interested to know why this is necessary, rather than the plug-in working correctly.

I know this has long since been answered, but i think there is a better solution

$(".autocomplete").autocomplete({
    ...
    open: function() {
        $("ul.ui-menu").width( $(this).innerWidth() );
        ...
    }
    ...
});

It worked fine for me.

I had a dig around in the autocomplete code and the culprit is this little blighter

_resizeMenu: function() {
    var ul = this.menu.element;
    ul.outerWidth( Math.max(
        ul.width( "" ).outerWidth(),
        this.element.outerWidth()
    ) );
},

I'm not sure what ul.width("") is suppose to be doing but ui.width("").outWidth() always returns the width of the body because that's what the ul is appended to. Hence the width is never set to the elements width....

Anyway. To fix simply add this to your code

$element.data("autocomplete")._resizeMenu = function () {
        var ul = this.menu.element;
        ul.outerWidth(this.element.outerWidth());
}

Is this a bug?

EDIT: In case anyone wants to see a reduced test case for the bug here it is.

Set the css in the open event!

$('#id').autocomplete({
    minLength: 3,
    source: function(request, response) {
        $.ajax({
                    url: "myurl",
                    dataType: "json",
                    type: 'POST',
                    data: {
                        'q': request.term,

                        'maxRows': 15
                    },
                    success: function(data) {

                        response($.map(data, function(item) {
                            return {
                                label: item.name,
                            }
                        })),
                    }
                })
            },
            select: function(event, ui) {
                $("#id").val(ui.item.label);
            },
            focus: function ( event, ui ){
                $form.find('#id').val(ui.item.label);
                return false;
            },
            open: function(){
                $('.ui-autocomplete').css('width', '300px'); // HERE
            }
        })

I know this has been answered long ago, but I ran into same problem. My solution was to add position:absolute

I ran into this issue as well but realized that I just forgot to include a reference to the jquery.ui.autocomplete.css style sheet. Did you include that style sheet in your layout/master page?

$("#autocompleteID").autocomplete({
source: "http://myhost/magento/js/jquery/ui/php/ville.php",
minLength: 1,
open: function(event, ui)
{
   $("#autocompleteID").autocomplete ("widget").css("width","300px");  
} 
});

If you like to use css try this:

.ui-widget-content.ui-autocomplete {
    width: 350px;
}

It will work on every autocomplete input.

If you are using the official jQuery ui autocomplete (i'm on 1.8.16) and would like to define the width manually, you can do so.

If you're using the minified version (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 replace it with (add this.options.width|| before 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 value into the .autocomplete({width:200}) function and jQuery will honour it. If not, it will default to calculating it.

I know this has long since been answered, but the easiest way I find is to use the id of the autocomplete, and to set the width to 100px you would call

$('.ui-autocomplete-input#MyId').css('width', '100px');

after you finish your $('#MyId').autocomplete(...); call. This way you don't end up tying the order of your autocomplete textboxes in your DOM to your script.

In case you not are able to set the width dynamically and nothing at all works try to include this

http://code.google.com/p/jquery-ui/source/browse/trunk/themes/base/jquery.ui.autocomplete.css?spec=svn3882&r=3882

either in a linked sheet or hardcoded and set the parameters here.

It worked for me after trying everything else

Well, Ender. I don't know if my solution can help you or not, but with Jqueryui remote-with-cache.html it worked. I just put in the size property in the text box.

Please see the code below:

<div class="demo">
    <div class="ui-widget">
        <label for="birds">Birds: </label>
        <input id="birds" size="30"/>
    </div>
</div>

My solution was to append the autocomplete to a div with an id, and they set CSS for that specific ul:

jQuery/JavaScript:

$("input[name='search-text]").autocomplete({
    appendTo: "#item-search-autocomplete",
    source: ....
});

CSS:

#item-search-autocomplete .ui-autocomplete {
    width: 315px;
}

Works like a charm.

My issue solved (in jQuery UI version 1.13.1) by just adding these two lines in .ui-autocomplete class

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    cursor: default;
    /* my added style */
    word-wrap: break-word;
    width: 0;
    /* my added style */
}

I faced the same issue and resolved it by using this piece of code, though it is a little hit and trial kind of thing, but it works, I was not being able to set the width so I decided to set the max-width property.

  $('.ui-autocomplete').css('margin-left','25%') //center align
  $('.ui-autocomplete').css('max-width','38%') //hit and trial
  $('.ui-autocomplete').css('min-width','38%') //hit and trial

See what works best for you.Hope this helps.

There is a width option for the autocomplete. I use it for 1.3.2.

$('#mytextbox').autocomplete(url, {  
        width: 280,
        selectFirst: false,
        matchSubset: false,
        minChars: 1,
        extraParams:{myextraparam:myextraparam},
        max: 100
    });

I have this in my css file, so the autocomplete takes the width of the styled span:

 span input.ui-autocomplete-input {
     width: 100%;
 }