Jquery 自动完成对齐

Question

目前，自动完成结果框与我的输入框的左边缘对齐，并向右侧扩展我给它的宽度。但是，我的业务要求是将其与输入框的右边缘对齐，如果输入框放置在页面的右侧，则将其向相反方向展开，因为结果会被剪切，并且水平滚动会添加到 View 中完整的结果。 (我可以修改我的“jquery-ui.css”)

有人可以帮忙吗？

Answer 1

当前版本的 jQuery UI 允许为自动完成小部件提供一个带有选项的位置对象，其属性与上面提到的位置小部件相同。因此您可以使用它来根据需要放置建议列表。

看这里http://jqueryui.com/demos/autocomplete/#option-position

如果您需要动态更改位置 - 您需要使用“open”事件

代码示例

//Supply a callback function to handle the open event as an init option.
$( ".selector" ).autocomplete({
   open: function(event, ui) { ... }
});
//Bind to the open event by type: autocompleteopen.
$( ".selector" ).bind( "autocompleteopen", function(event, ui) {
  ...
});

在其中您可以更改 css() 中自动编译表单的位置

$('.ui-autocomplete').css({ 'left': x + 'px', 'top': y + 'px' });

PS:我不确定您是否可以仅使用 css 来实现，因为位置取决于父 html 输入字段