定位jQuery UI Widget

Question

我有一个显示多列的自定义jQuery UI自动完成功能。这很有效，因为另一个开发人员是创建它的人，但我想做出改变。

目前，自动完成下拉列表会自行定位，因此左上角与输入文本框的左下角对齐。但是，由于下拉列表的宽度（显示七列）延伸到页面的右侧，远远小于在较小的显示器上，它将在屏幕外！

我可以轻松地重新定位输入框，但我希望重新定位下拉菜单UI。但我无法弄明白如何。以下是截图：

我在jQuery UI工具箱（.offset()，.position()）中尝试过的任何内容都没有用，因为我似乎无法获得对下拉菜单本身的引用。在使用.mcautocomplete()定位输入后，我在_create方法_renderMenu中尝试了...要么我最终偏移输入框，得到错误，要么没有任何反应。

JSFiddle

Answer 1

jQuery UI自动填充包含position option，position utility使用demo定位自动填充弹出窗口。

在您的选项（https://github.com/spotify/docker-maven-plugin）中添加以下内容：

position: { my : "center top", at: "right bottom" }

Answer 2

您可以使用以下逻辑为自动填充添加类：

$( elem ).autocomplete({ 
    source: ... 
}).autocomplete( "widget" ).addClass( "whatever" );

之后，您可以设置特定的自动填充功能。这是一个例子：

.whatever {
  position: absolute;
  left: 0!important;
}

如果您希望它居中并知道您的页面宽度，您可以：

.whatever {
  position: absolute;
  left: 0!important;
  right: 0!important;
  width: 900px; /* or whatever your page has */
  margin: 0 auto!important;
}

important是覆盖jQuery自动填充本身添加的内联样式所必需的。