Zmiana położenia jQuery UI Autouzupełnianie przy zmianie rozmiaru przeglądarki

Question

Po otwarciu rozwijanego autouzupełniania i zmianie rozmiaru okna przeglądarki rozwijana funkcja autouzupełniania nie zmienia położenia. Wyróżnione w tym filmie: http://www.youtube.com/watch?v=d7rZYH0DgWE

Zajrzałem do dokumentacji i nie mogę znaleźć metody repozycjonowania (w dokumentacji jquery-ui http://jqueryui.com/demos/autocomplete), które można wywołać w ramach wywołania funkcji $ (window) .resize().

Czy jest w tym elegancki sposób?

Answer 1

Patrząc na to znowu Jednym ze sposobów rozwiązania tego problemu jest po prostu zadzwonić do pola autouzupełniania aby wyszukiwać za zmianą rozmiaru:

np

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

Spowoduje to zmianę pozycji menu rozwijanego autouzupełniania.

Możesz również chcieć, aby autouzupełnianie buforowała wyniki, aby nie trafiały one do bazy danych podczas ponownego wyszukiwania. Inną kwestią do rozważenia jest wywołanie funkcji autouzupełniania ("search") w funkcji timeout, aby poprawić responsywność ui. Cross-browser window resize event - JavaScript/jQuery

Answer 2

Tak, jest to możliwe, ale jest bardzo trudne. Musisz zmienić zarówno css, jak i plugin. Jego domyślna funkcjonalność ustawia górny i prawy atrybut. Musisz zmienić wtyczkę, aby ustawić pozycję div (lub ul) względem szerokości i wysokości dokumentu. (górny: 50%, prawy: 50%, margin-left: -500px; margin-top: -100px).

Możesz także zniszczyć podział przy zmianie rozmiaru, jeśli nie chcesz go zepsuć. Będzie ona pojawić się na zmiany w oparciu o dokument nowej szerokości i wysokości

Answer 3

Zadzwonienie do pola autouzupełniania w celu wyszukania zmiany rozmiaru działa dla mnie. Jedna rzecz do dodania: upewnij się, że wyszukiwanie jest wykonywane tylko przy zmianie rozmiaru, gdy wynik wyszukiwania jest widoczny. W przeciwnym razie wyszukiwanie jest wykonywane nawet po wybraniu jednego elementu z pola wyniku.

Answer 4

Proponuję po prostu zamknąć wyniki na rozmiar strony.

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

Gdy użycie zmienia szerokość okna zniknie, a jeśli oni ponownie wpisać go ponownie pojawiają się tak jak powinien, we właściwym położeniu.

Answer 5

Oto inne rozwiązanie, jeśli nie chcesz ponowić wyszukiwania lub zamknąć okna.