在瀏覽器上重新定位jQuery UI自動完成調整大小

如果您打開自動完成下拉菜單並調整瀏覽器窗口大小，則自動完成下拉列表不會重新定位。在此視頻中突出顯示：http://www.youtube.com/watch?v=d7rZYH0DgWE 在瀏覽器上重新定位jQuery UI自動完成調整大小

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

這是否有一個優雅靈魂？

2011-11-07 3en

望着解決這個問題這又一個方式的變化僅僅是調用自動完成場對調整大小搜索：

如

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

這將重新定位自動填充下拉菜單。

您可能還希望確保自動完成緩存結果，以便在再次搜索時不會觸及數據庫。另一件要考慮的事情是在超時功能內調用自動完成（「搜索」）以提高UI響應度Cross-browser window resize event - JavaScript/jQuery

來源

2011-11-08 17:46:05 3en

是的，這是可能的，但它非常棘手。你必須改變CSS和插件。它的默認功能設置了頂級和正確的屬性。您必須更改插件以相對於文檔的寬度和高度來定位div（或ul）。（即頂部：50％，右側：50％;剩餘邊距：-500px;邊距頂部：-100px）。

如果你不想把它搞亂，你也可以在調整大小的時候摧毀它。它會重新出現在基於文檔的新高度和寬度

來源

2011-11-07 14:30:54 John

謝謝約翰，我再次看看自動完成功能，發現使用「搜索」會重新定位/重新顯示自動填充框。 – 3en

-1

調用自動填充字段來搜索調整大小適用於我。添加一件事：確保只在搜索結果可見時執行搜索。否則，即使從結果框中選擇了一個項目，也會執行搜索。

來源

2012-01-18 14:50:06 Fred

我會建議只關閉頁面調整大小的結果。

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

當使用改變窗口的寬度時，它將消失，如果再次輸入，它將重新顯示，因爲它應該正確定位。

來源

2013-08-30 20:27:24

這是另一種解決方案，如果您不想重新搜索或關閉窗口。

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

來源

2014-11-20 22:25:40

在瀏覽器上重新定位jQuery UI自動完成調整大小

回答

相關問題