Hộp Tự động điền jQuery vẫn mở và ở cùng vị trí khi cuộn

Question

Khi hộp văn bản tự động hoàn tất được mở rộng và người dùng cuộn trang trình duyệt, hộp vẫn ở cùng vị trí và không biến mất. Tôi ổn với nó được mở nếu nó ở trong cùng một vị trí, nhưng tôi không hiểu tại sao nó lại ở cùng một chỗ trên cuộn giấy.

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

này đã được cố định với việc bổ sung các tùy chọn appendTo cho phương pháp autocomplete:

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