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

【问题标题】：Repositioning jQuery UI Autocomplete on browser resize在浏览器调整大小时重新定位 jQuery UI 自动完成
【发布时间】：2011-11-07 14:02:11
【问题描述】：

如果您打开自动完成下拉菜单并调整浏览器窗口的大小，则自动完成下拉菜单不会重新定位。本视频重点介绍：http://www.youtube.com/watch?v=d7rZYH0DgWE

我查看了文档，但找不到可以在 $(window).resize() 函数调用中调用的重新定位方法（在 jquery-ui 文档 http://jqueryui.com/demos/autocomplete 中）。

这有什么优雅的灵魂吗？

【问题讨论】：

标签： javascript jquery jquery-ui jquery-autocomplete jquery-ui-autocomplete

【解决方案1】：

我建议在页面调整大小时关闭结果。

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

当用户改变窗口的宽度时，它会消失，如果他们再次输入，它会重新出现，并正确定位。

【讨论】：

【解决方案2】：

再看一遍解决这个问题的一种方法就是调用自动完成字段来搜索resize：

例如

$(window).resize(function() {
    $( "#autocomplete-field" ).autocomplete( "search" );
});

这将重新定位自动完成下拉菜单。

您可能还希望确保自动完成功能缓存结果，以便在再次搜索时不会访问数据库。另一件要考虑的事情是在超时函数中调用 autocomplete("search") 以提高 UI 响应能力Cross-browser window resize event - JavaScript / jQuery

【讨论】：

【解决方案3】：

如果您不想重做搜索或关闭窗口，这是另一种解决方案。

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

【讨论】：

【解决方案4】：

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

如果您不想搞砸，您也可以在调整大小时破坏分区。它将根据文档的新宽度和高度重新出现

【讨论】：

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

【解决方案5】：

调用自动完成字段来搜索调整大小对我有用。要添加的一件事：确保仅在搜索结果可见时在调整大小时执行搜索。否则，即使从结果框中选择了一项，也会执行搜索。

【讨论】：