Question

Is there a way to set the width of an autocomplete object dynamically, based on the length of text returned to it?

Thanks

Answer 1

This one took a bit of effort but I believe I have a reasonable solution. Primarily this requires binding to the “open” event of the autocomplete widget in order to change the default behavior of the menu as it displays, as well as modifying a few CSS attributes to help us out.

The method comes with one caveat: this will cause the background bars to only span the length of the text rather than all the way across the menu in IE7. It will function normally in IE8+ as well as all other major browsers. I would discourage you from treating it as an issue, as you’d be tailoring your solution to a visual disparity for less than 3% of the market and probably even less of your actual viewership.

The CSS

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ui-autocomplete .ui-menu-item a {
    padding-right: 20px;
}

Add these styles to your project to help with visual display. The .ui-autocomplete styles are fairly standard to create a scrollable list of menu items and you are likely already using it. The right padding applied to the anchor is to allow for the proper amount of room for a scrollbar in Firefox and Webkit browsers. It works better than applying it directly to the UL container.

The jQuery

$(".myAutoComplete").autocomplete({
    ...
    open: function(e, ui) {
        $("ul.ui-autocomplete:visible").css("width", "").find("a").html(function(i, html) {
            return html.replace(/\s/g, " ");
        });
    }
    ...
});

The handler bound to the open event is mostly obvious in what it does. First, the selector it uses looks for the only autocomplete menu visible. Thankfully, the open event is raised only after the autocomplete menu has been shown. This will help your handler direct its attention in the event you have more than one autocomplete widget on a page. From there, it removes the “width” attribute that’s applied directly to the CSS of the unordered list. Then, it finds all anchor descendants in the list and does a global replace on all white space in its HTML with non-breaking spaces. The nbsp forces the anchor to respond by increasing its width rather than wrapping text to a new line, thereby increasing the width of the entire menu.

You can see a working demo here. I’d suggest typing in “ab” followed by “deep” to see the differences in resizing as they happen. Sorry for the long list of colors (sorce) in the code, but I wanted to give you the opportunity to get a good range of possible suggestions to view differences in the resizing.

EDIT

Don’t know what I was thinking back then, but a much easier approach would be to provide the following additional style and ditch the open event handler:

.ui-autocomplete .ui-menu-item a {
    white-space: nowrap;
}