Question

I’m having this problem where a floating widget I’m designing, which contains the jQuery UI combobox, allows content to wrap right off the side of the screen. I can’t seem to control the actual width of the menu container jQuery UI creates on the fly. I’ve read about a few other options including the “open” event which is supposed to fire when the combobox is opened, but I’m not having any luck getting that to work either.

Here is a fiddle of what I have…http://jsfiddle.net/farina/RDd3A/14/

It illustrates a small snippit of code from my widget. As you can see the widget will be right aligned, and floating using absolute positioning from an initial relative item. Everything else works as expected, I’m just struggling to keep the “options menu” within the bounds of the widget container.

You’ll notice on first click of the drop down arrow, the menu container blows out the side of the page. It works even worse when it’s not inside the jsFiddle viewer.

Any help is greatly appreciated as this is driving me crazy!

Answer 1

OK, so…after some digging I realized that the jQuery ui.combobox has hard coded options for the autocomplete it creates. I find that to be a solid mess, and in no way a completed widget.

I fixed my problem by taking the source from here jQuery UI Source and augmenting it with it’s own options object like this…

(function ($) {
    $.widget("ui.combobox", {
        options: {
            appendTo: "body",
            position: {
                my: "left top",
                at: "left bottom",
                collision: "none"
            }
        },

        _create: function () {
            var self = this,
                    select = this.element.hide(),
                    selected = select.children(":selected"),
                    value = selected.val() ? selected.text() : "";
            var input = this.input = $("<input>")
                    .insertAfter(select)
                    .val(value)
                    .autocomplete({
                        appendTo: self.options.appendTo,
                        position: self.options.position,
                        delay: 0,
                        minLength: 0,
                        source: function (request, response) {
                            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                            response(select.children("option").map(function () {
                                var text = $(this).text();
                                if (this.value && (!request.term || matcher.test(text)))
                                    return {
                                        label: text.replace(
                                            new RegExp(
                                                "(?![^&;]+;)(?!<[^<>]*)(" +
                                                $.ui.autocomplete.escapeRegex(request.term) +
                                                ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                            ), "<strong>$1</strong>"),
                                        value: text,
                                        option: this
                                    };
                            }));
                        },
                        select: function (event, ui) {
                            ui.item.option.selected = true;
                            self._trigger("selected", event, {
                                item: ui.item.option
                            });
                        },
                        change: function (event, ui) {
                            if (!ui.item) {
                                var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                                    valid = false;
                                select.children("option").each(function () {
                                    if ($(this).text().match(matcher)) {
                                        this.selected = valid = true;
                                        return false;
                                    }
                                });
                                if (!valid) {
                                    // remove invalid value, as it didn't match anything
                                    $(this).val("");
                                    select.val("");
                                    input.data("autocomplete").term = "";
                                    return false;
                                }
                            }
                        }
                    })
                    .addClass("ui-widget ui-widget-content ui-corner-left");

            input.data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                        .data("item.autocomplete", item)
                        .append("<a>" + item.label + "</a>")
                        .appendTo(ul);
            };

            this.button = $("<button type='button'>&nbsp;</button>")
                    .attr("tabIndex", -1)
                    .attr("title", "Show All Items")
                    .insertAfter(input)
                    .button({
                        icons: {
                            primary: "ui-icon-triangle-1-s"
                        },
                        text: false
                    })
                    .removeClass("ui-corner-all")
                    .addClass("ui-corner-right ui-button-icon")
                    .click(function () {
                        // close if already visible
                        if (input.autocomplete("widget").is(":visible")) {
                            input.autocomplete("close");
                            return;
                        }

                        // work around a bug (likely same cause as #5265)
                        $(this).blur();

                        // pass empty string as value to search for, displaying all results
                        input.autocomplete("search", "");
                        input.focus();
                    });
        },

        destroy: function () {
            this.input.remove();
            this.button.remove();
            this.element.show();
            $.Widget.prototype.destroy.call(this);
        }
    });
})(jQuery);

This at very least allows you to pass the two more important styling options to the autocomplete (appendTo and position).

Then you can simply do something like this…

$('#myCombobox').combobox({ position: { my: "right top", at: "right bottom"} });

After even further digging I decided to do something like this…

$('#myCombobox').combobox({ position: { collision: "flip", offset: "-25 0"} });

Which gives me exactly what I need!