如何在 jQuery UI 中强制打开自动完成功能
How to Forcefully open autocomplete up side in jQuery UI
在我的项目中,自动完成下拉菜单在底部有固定位置。
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
});
我想用力向上打开,而且当我滚动页面时,自动完成下拉菜单必须带有文本框,不能滚动它已修复。
当我在文本框中书写时,它会显示带有剪切下拉列表,如图所示。
这是你想要的吗? 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'
});
});
在打开事件中,我将自动完成的位置更改为输入的顶部。
在滚动事件中,我再次将位置更改为输入的顶部。
我认为这是理想的行为。希望对你有帮助。
在我的项目中,自动完成下拉菜单在底部有固定位置。
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
});
我想用力向上打开,而且当我滚动页面时,自动完成下拉菜单必须带有文本框,不能滚动它已修复。
当我在文本框中书写时,它会显示带有剪切下拉列表,如图所示。
这是你想要的吗? 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'
});
});
在打开事件中,我将自动完成的位置更改为输入的顶部。
在滚动事件中,我再次将位置更改为输入的顶部。
我认为这是理想的行为。希望对你有帮助。