jQuery自动完成对齐答案

【问题标题】：Jquery autocomplete alignmentjQuery自动完成对齐
【发布时间】：2012-09-13 16:47:01
【问题描述】：

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

有人可以帮忙吗？

【问题讨论】：

标签： jquery user-interface autocomplete alignment styling

【解决方案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 输入字段

【讨论】：

谢谢安东。它确实改变了定位。但是，我需要动态地执行此操作。我的结果宽度是 650px。我需要检查右侧的空间是否足够并且结果没有被修剪，否则将其显示在左侧。我可以管理逻辑，但需要一个可以应用的事件/地方。