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 would 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?

回答1:

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.

回答2:

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.

回答3:

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.

回答4:

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.

回答5:

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

回答6:

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
            }
        })

回答7:

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?

回答8:

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

回答9:

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>

回答10:

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.

回答11:

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.

回答12:

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

回答13:

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.

回答14:

If you like to use css try this:

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

It will work on every autocomplete input.

回答15:

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

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

回答16:

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.

回答17:

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
    });

来源：https://stackoverflow.com/questions/5643767/jquery-ui-autocomplete-width-not-set-correctly

标签

jquery

jquery-ui

autocomplete

jquery-ui-autocomplete