JQuery autocomplete block remains open and in the same position when scrolling

Question

When the autocomplete text field expands and the user scrolls the browser page, the field remains in the same position and does not disappear. I am fine with the discovery if he remains in the same position, but I do not understand why he remained in the same place on the 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