Tính năng tự động hoàn thành của jQuery-UI không hiển thị tốt, vấn đề z-index

Tôi hiện đang triển khai tính năng tự động hoàn thành của giao diện người dùng jQuery trong trang web khách hàng của tôi. Vấn đề là: phần tử mà tự động hoàn thành nằm trong đó, có chỉ số z cao hơn sau đó là chỉ số z của tự động hoàn thành. Tôi đã thử đặt chỉ mục z tự động hoàn thành theo cách thủ công, nhưng tôi có cảm giác rằng giao diện người dùng jQuery đang ghi đè điều này.

Trên thực tế, câu hỏi của tôi là một bản sao của danh sách đề xuất tự động điền sai z-index, làm cách nào để thay đổi? , nhưng vì không có câu trả lời nên tôi đã nghĩ đến việc thử lại.

Mọi sự giúp đỡ đều được hoan nghênh!

Martijn

Sử dụng z-indexvà!important

.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}  

Trong khi tìm kiếm, tôi đã tìm thấy chủ đề này (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Rõ ràng cách duy nhất để thay đổi kiểu của hộp tự động hoàn thành là thực hiện nó thông qua javascript:

    open: function(){
        $(this).autocomplete('widget').css('z-index', 100);
        return false;
    },

Thay đổi chỉ số z của Div mẹ, menu tự động hoàn thành sẽ có chỉ số z của div + 1

Trong CSS của jQuery UI:

.ui-front { z-index: 9999; }

Hãy thử điều này, bạn có thể thao tác z-index trong thời gian chạy hoặc khởi tạo

$('#autocomplete').autocomplete({
    open: function(){
        setTimeout(function () {
            $('.ui-autocomplete').css('z-index', 99999999999999);
        }, 0);
    }
});

Nếu bạn có thể thực thi chỉ số z cao hơn khi nhập văn bản tự động hoàn thành thì đây là giải pháp cho vấn đề của bạn.

jQuery UI Autocomplete danh sách tùy chọn tính toán giá trị z-index của nó bằng cách lấy z-index của đầu vào văn bản mà nó đang được đính kèm và thêm 1 vào giá trị đó.

Vì vậy, bạn có thể cung cấp chỉ số z là 999 cho đầu vào văn bản, tính năng tự động hoàn thành sẽ có giá trị chỉ số z là 1000

Lấy từ http://bugs.jqueryui.com/ticket/5489

<input type="text" class="autocomplete" style="z-index:999;" name="foo">

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}

cũng có thể xem bạn đang gắn món đồ vào đâu. tôi đã gặp sự cố này khi tôi nối tự động hoàn thành vào một div bên trong, nhưng khi tôi thêm tự động hoàn thành vào thẻ body, sự cố đã biến mất.

Nếu bạn đang sử dụng hộp thoại jquery-ui, hãy cẩn thận khởi tạo hộp thoại TRƯỚC khi tự động hoàn thành hoặc tự động hoàn thành sẽ được hiển thị dưới hộp thoại.

Hãy xem câu trả lời này tự động hoàn thành giao diện người dùng jquery bên trong hộp thoại ui phương thức - đề xuất không hiển thị?

Hãy thử ngay trong css của bạn (trước khi tải tập lệnh), không phải trong firebug:

.ui-selectmenu-menu {
    z-index:100;
}

Trong trường hợp của tôi, điều này hoạt động và tạo ra các chỉ mục z như: 100x (ví dụ: 1002)

thêm những điều sau

.ui-autocomplete
{
    z-index:100 !important;
}

trong tệp jquery-custom-ui.css (hoặc tệp được rút gọn nếu bạn đang sử dụng).

Đối với những nhà phát triển vẫn sử dụng plugin này. Thử đi:

.acResults
{
    z-index:1;
}

Đối với tôi là đủ với z-index: 1, hãy đặt giá trị bạn cần trong trường hợp của mình.