jquery - jQuery自动完成对齐

Question

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

有人可以帮忙吗？

Answer 1

当前版本的 jQuery UI 允许为 Autocomplete 小部件提供带有选项的位置对象，具有与上述位置小部件相同的属性。所以你可以用它来定位你喜欢的建议列表。

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

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

代码示例

//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 输入字段