Autouzupełnianie jQuery-UI nie wyświetla się dobrze, problem z indeksem Z.

Obecnie wdrażam autouzupełnianie interfejsu użytkownika jQuery w sklepie internetowym moich klientów. Problem polega na tym, że element, w którym znajduje się autouzupełnianie, ma wyższy indeks z niż indeks z autouzupełniania. Próbowałem ręcznie ustawić indeks z autouzupełniania, ale mam wrażenie, że interfejs użytkownika jQuery to nadpisuje.

W rzeczywistości moje pytanie jest duplikatem listy sugestii autouzupełniania, nieprawidłowy indeks Z, jak mogę to zmienić? ale ponieważ nie było odpowiedzi, pomyślałem o ponownej próbie.

Każda pomoc jest mile widziana!

Martijn

Użyj z-indexi!important

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

Podczas wyszukiwania znalazłem ten temat (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Najwyraźniej jedynym sposobem zmiany stylu pola autouzupełniania jest zrobienie tego za pomocą javascript:

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

Zmień indeks z nadrzędnego elementu Div, menu autouzupełniania będzie zawierało indeks z elementu div + 1

W CSS jQuery UI:

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

Spróbuj tego, możesz manipulować indeksem Z w czasie wykonywania lub inicjalizacji

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

Jeśli jesteś w stanie wymusić wyższy indeks Z przy autouzupełnianiu wprowadzania tekstu, to jest to rozwiązanie Twojego problemu.

Lista opcji autouzupełniania interfejsu użytkownika jQuery oblicza wartość indeksu z, biorąc indeks z tekstu wejściowego, do którego jest dołączany, i dodaje 1 do tej wartości.

Więc możesz podać indeks z 999 do wprowadzania tekstu, autouzupełnianie będzie miało wartość indeksu z równą 1000

Zaczerpnięte z http://bugs.jqueryui.com/ticket/5489

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

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

spójrz również na miejsce, do którego dołączasz element. Natknąłem się na ten problem, kiedy dodałem autouzupełnianie do wewnętrznego elementu div, ale kiedy dołączyłem autouzupełnianie do tagu body, problem zniknął.

Jeśli używasz okien dialogowych jquery-ui, uważaj, aby zainicjować okna dialogowe PRZED autouzupełnianiem lub autouzupełnianie pojawi się pod oknem dialogowym.

Spójrz na tę odpowiedź jQuery UI autouzupełnianie w modalnym oknie dialogowym interfejsu użytkownika - sugestie się nie wyświetlają?

Spróbuj mimo wszystko w swoim css (przed załadowaniem skryptu), a nie w firebug:

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

W moim przypadku to działa i tworzy indeksy z, takie jak: 100x (na przykład 1002)

dodaj następujące elementy

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

w pliku jquery-custom-ui.css (lub zminimalizowanym, jeśli go używasz).

Dla programistów, którzy nadal używają tej wtyczki. Spróbuj tego:

.acResults
{
    z-index:1;
}

U mnie wystarczył z-index: 1, ustaw potrzebną wartość w swoim przypadku.