如何在jQuery UI中强制打开自动完成端

Question

在我的项目中，自动完成下拉列表在底部有固定位置。

HTML

<div class="ui-widget">
    <input id="tags"/>
</div>

的jQuery

var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags" ).autocomplete({
   source: availableTags
});

我想强行打开一边，当我滚动页面然后自动完成下拉列表必须用文本框不滚动它固定。

当我在文本框中书写时，它会显示切割下拉列表，如图所示。

Demo

Answer 1

这是你想要的吗？ Fiddle

$( "#tags" ).autocomplete({
source: availableTags,
    open: function (event, ui) {// Code to open it at top left of the input.
    var $input = $(event.target);
    var $results = $input.autocomplete("widget");
    var scrollTop = $(window).scrollTop();
    var top = $results.position().top; 
    var height = $results.outerHeight();
    if (top + height > $(window).innerHeight() + scrollTop) {
        newTop = top - height - $input.outerHeight();
        if (newTop > scrollTop)
            $results.css("top", newTop + "px");
    }
}
});


$(window).scroll(function (event) {// Change position in the scroll event
     $('.ui-autocomplete.ui-menu').position({
            my: 'left bottom',
            at: 'left top',
            of: '#tags'
        });
 });

在打开事件中，我将自动完成的位置更改为输入的顶部。

在滚动事件中，我再次将位置更改为输入的顶部。

我认为这是理想的行为。希望它有所帮助。