jQuery Autocomplete box stays open and in same position when scrolling

Question

When the autocomplete textbox is expanded, and the user scrolls the browser page, the box stays in the same position and does not disappear. I'm ok with it being open if it stays in the same position, but I don't understand why it's staying in the same spot on scroll.

function ($) {
    $.widget("ui.combobox", {
        _create: function () {
            var self = this,
                select = this.element.hide(),
                selected = select.children(":selected"),
                value = selected.val() ? selected.text() : "";
            var input = this.input = $("<input id='innertextbox'>")
                .insertAfter(select)
                .autocomplete({
                    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
                        });
                        if (jQuery(ui.item.option).hasClass('_self'))
                            window.location.href = ui.item.option.value;
                        else
                            window.open(ui.item.option.value,'_newtab');
                    },
                    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;
                                }
                            }); var innerBoxValue = $("#innertextbox").val(); 

                            if (!valid && innerBoxValue != "Daily Needs...")  {
                                // 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");

            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' id='dailyNeedsButton'>&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-button-icon")
                .click(function () {
        jQuery("#innertextbox").val("");
                    // 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);

jQuery(document).ready(function () {

    jQuery("#dailyNeedsSelect").combobox();
    jQuery("#innertextbox").blur(function () {
        jQuery("#innertextbox").val("Daily Needs...");
    });
    jQuery("#innertextbox").val("Daily Needs...");
    jQuery(".ui-autocomplete").position({ my: "right top", at: "right bottom", of: jQuery("#innertextbox"), collision: "flip flip" }); 

    jQuery("#dailyNeedsButton").blur(function () { jQuery("#innertextbox").val("Daily Needs..."); });
    jQuery("#innertextbox").focus(function () { if (jQuery("#innertextbox").val() == "Daily Needs...") jQuery("#innertextbox").val(""); });

    jQuery("#innertextbox").bind("click", function () {
        jQuery("#innertextbox").val("");
    });
});

Answer 1

This has been fixed with the addition of the appendTo option for the autocomplete method:

http://docs.jquery.com/UI/Autocomplete#option-appendTo