Tái định vị jQuery UI Tự động điền trên trình duyệt thay đổi kích thước

Question

Có vấn đề nếu bạn mở trình đơn thả xuống tự động hoàn tất và cũng thay đổi kích thước cửa sổ trình duyệt của bạn, trình đơn thả xuống tự động hoàn tất không đặt lại vị trí. Nổi bật trong video này: http://www.youtube.com/watch?v=d7rZYH0DgWE

Tôi đã xem tài liệu và không thể tìm thấy phương pháp định vị lại (trong tài liệu jquery-ui http://jqueryui.com/demos/autocomplete) có thể được gọi trong lệnh gọi hàm $ (window) .resize().

Có linh hồn thanh lịch với điều này không?

Answer 1

Nhìn vào này một lần nữa một cách để giải quyết vấn đề này chỉ là để gọi các lĩnh vực autocomplete để tìm kiếm đã đổi kích thước:

ví dụ

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

Thao tác này sẽ đặt lại vị trí thả xuống tự động hoàn thành.

Bạn cũng có thể muốn đảm bảo tự động hoàn thành lưu trữ kết quả để không đánh vào cơ sở dữ liệu khi tìm kiếm lại. Và một điều khác cần xem xét là gọi tự động hoàn tất ("tìm kiếm") trong một chức năng hết thời gian chờ để cải thiện khả năng phản hồi ui Cross-browser window resize event - JavaScript/jQuery

Answer 2

Có thể, nhưng rất khó. Bạn phải thay đổi cả css và plugin. Chức năng mặc định của nó đặt thuộc tính trên cùng và bên phải. Bạn phải thay đổi plugin để định vị div (hoặc ul) tương ứng với chiều rộng và chiều cao của tài liệu. (ví dụ: trên cùng: 50%, bên phải: 50%; lề trái: -500px; lề trên: -100px).

Bạn cũng có thể hủy phân chia kích thước nếu bạn không muốn làm hỏng nó. Nó sẽ xuất hiện trở lại trên thay đổi dựa trên chiều rộng mới của tài liệu và chiều cao

Answer 3

Gọi trường tự động hoàn tất để tìm kiếm thay đổi kích thước hoạt động cho tôi. Một điều cần thêm: Đảm bảo rằng tìm kiếm chỉ được thực hiện khi thay đổi kích thước khi kết quả tìm kiếm hiển thị. Nếu không, tìm kiếm được thực hiện ngay cả sau khi đã chọn một mục từ hộp kết quả.

Answer 4

Tôi khuyên bạn chỉ nên đóng kết quả trên một trang thay đổi kích thước.

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

Khi sử dụng thay đổi chiều rộng của cửa sổ nó sẽ biến mất và nếu nhập lại lần nữa nó sẽ xuất hiện đúng vị trí.

Answer 5

Đây là giải pháp khác nếu bạn không muốn làm lại tìm kiếm hoặc đóng cửa sổ.

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