Question

如果您打开自动填充下拉菜单并调整浏览器窗口大小，则自动填充下拉菜单不会重新定位，则会出现问题。在此视频中突出显示：http://www.youtube.com/watch?v=d7rZYH0DgWE

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

这是否有优雅的灵魂？

Answer 1

我建议只关闭页面调整大小的结果。

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

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

Answer 2

再次看一下解决此问题的一种方法就是调用自动填充字段来搜索调整大小：

e.g

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

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

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

Answer 3

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

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

Answer 4

是的，这是可能的，但它非常棘手。你必须改变css和插件。它的默认功能设置了顶部和右侧属性。您必须更改插件以将div（或ul）相对于文档的宽度和高度定位。（即最高：50％，右：50％;保证金左：-500px;保证金最高：-100px）。

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

重新出现

Answer 5

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

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

5 个答案: