Javascript 在浏览器调整大小时重新定位jQuery UI自动完成

如果打开“自动完成”下拉列表并调整浏览器窗口大小，则会出现问题“自动完成”下拉列表不会重新定位。在本视频中突出显示：

我查看了文档，没有找到可以在$（window）.resize（）函数调用中调用的重新定位方法（在jquery ui文档中）

---

这有一个优雅的解决方案吗？

是的，这是可能的，但非常棘手。您必须同时更改css和插件。它的默认功能设置顶部和右侧属性。您必须更改插件以相对于文档的宽度和高度定位div（或ul）。（即顶部：50%，右侧：50%；左侧边缘：-500px；顶部边缘：-100px）

---

如果你不想把它搞砸，你也可以在调整大小时销毁分区。根据文档的新宽度和高度进行更改时，它将重新出现。再次查看此问题，解决此问题的一种方法是调用autocomplete字段以搜索调整大小：

e、 g

这将重新定位“自动完成”下拉列表

---

您可能还希望确保autocomplete缓存结果，以便在再次搜索时不会命中数据库。另一个需要考虑的是在超时函数中调用Auto Cu饰文（“Search”）以提高UI响应性

调用AutoRealField字段来搜索ReSigabyWorks为我。要添加的一点是：确保只有在搜索结果可见时才对resize执行搜索。否则，即使从结果框中选择了一个项目，也会执行搜索。

我建议只关闭页面上的结果

$(window).resize(function() {
    $(".ui-autocomplete").css('display', 'none');
});

---

当用户更改窗口的宽度时，它将消失，如果他们再次键入，它将重新显示，位置正确。

如果您不想重复搜索或关闭窗口，这里有另一个解决方案

$(window).resize(function() {
  var position = $("#autocompleteField").offset();
  var properties = { left: position.left,
                     top: position.bottom };
  $(".ui-autocomplete").css(properties);
});

---

谢谢John，我再次查看了自动完成功能，发现使用“搜索”将重新定位/显示自动完成框。

$(window).resize(function() {
  var position = $("#autocompleteField").offset();
  var properties = { left: position.left,
                     top: position.bottom };
  $(".ui-autocomplete").css(properties);
});