在浏览器resize时重新定位jQuery UI自动完成

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

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

这有优雅的灵魂吗？

Answer 1

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

例如

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

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

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

Answer 2

我建议只关闭页面resize的结果。

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

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

Answer 3

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

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

Answer 4

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

如果你不想搞砸它，你也可以在resize时销毁它。 它将根据文档的新宽度和高度重新出现

Answer 5

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