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

83

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

— Martijn
źródło

3

Czy to ci pomoże? stackoverflow.com/questions/3549860/…

— Tim

2

Ponieważ nie ma przykładów kodu, polecam ustawienie indeksu z tak, jak próbowałeś wcześniej i ustawić go na!important

— Igor Dymov.

Mam ten sam problem, ale błąd pojawia się tylko w przeglądarce Chrome. Wydaje się, że żadne rozwiązanie tutaj nie działa. Czy ktoś może mi pomóc?

— Nivs

104

Użyj z-indexi!important

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

— Ranczo
źródło

Minęło trochę czasu, odkąd opublikowałem to pytanie, ale niejasno pamiętam, że javascript (a tym samym jQuery) był w stanie nadpisać właściwości CSS, mimo że są one zdefiniowane jako „! Important”.

— Martijn

1

Używanie +1 za pomocą! Ważne w moim niestandardowym arkuszu stylów również działało doskonale i było znacznie lepszym rozwiązaniem niż użycie wywołania zwrotnego open ().

— Alex Fairchild

Przyjąłem tę odpowiedź na swoją korzyść, ponieważ zgadzam się, że to rozwiązanie jest o wiele przyjemniejsze. Nie sprawdziłem jednak odpowiedzi ...

— Martijn

Jestem nowy w jQuery i ta odpowiedź jest bardzo dobra. Pracował dla mnie. Miałem problem ze znalezieniem miejsca .ui-autocomplete, ale w końcu znalazłem go w jquery-ui.css, nadałem mu indeks z i viola działało!

— atsurti

Świetna odpowiedź. Pracował też ze mną. Wystarczy dodać kilka ciekawostek. Po pierwsze, dane autouzupełniania są zawarte w klasie zwanej autouzupełnianiem ui, którą można następnie nadać stylowi w CSS, jak powyżej. Po drugie, jeśli używasz autouzupełniania z Bootstrapem, menu, które jest zawsze na wierzchu, ma indeks Z równy 1030, więc będziesz musiał zrobić to 1031. Świetne rozwiązanie. Dzięki.

— Randy Greencorn

60

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;
    },

— Martijn
źródło

2

Dlaczego zwracasz fałsz?

— Noyo,

Ogólny paradygmat w programach obsługi zdarzeń polega na tym, że zwracanie wartości false zapobiega propagowaniu zdarzenia. Chociaż po czterech latach nie mam pojęcia, czy rzeczywiście było to konieczne w tej sytuacji ..

— Martijn

2

Dzięki za odpowiedź, nawet jeśli nastąpi to po latach! Rzeczywiście, nie jest to potrzebne w twoim przypadku, a może nawet powodować niepożądane zachowanie u innych. W każdym razie ten problem ma teraz standardowe rozwiązanie ( opcja ui-frontklasa + appendTowidżet): api.jqueryui.com/theming/stacking-elements

— Noyo

10

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

— Gracjan
źródło

1

Autouzupełnianie jest dodawane na końcu treści ciała, więc będzie miało indeks z ciała + 1

— Marius

8

@Marius, możesz użyć appendToopcji, aby wskazać znacznikowi menu, gdzie iść, w przeciwnym razie możesz dodać klasę ui-frontdo jednego z elementów nadrzędnych wejścia.

— Noyo,

1

Jeszcze jedno: nadrzędny element div musi używać względnego pozycjonowania („position: relative”), w przeciwnym razie jQuery nie będzie w stanie określić swojego indeksu z (patrz bugs.jqueryui.com/ticket/5489 )

— Felix Schwarz

9

W CSS jQuery UI:

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

— maseo
źródło

1

Witamy w StackOverFlow.com, to powinien być komentarz lub bardziej rozbudowana odpowiedź.

— Diego C Nascimento

to źle, kiedy jquery ui musi wyskoczyć coś nowego, po prostu pobiera poprzedni indeks z i zwiększa go o 1, użycie 9999 sprawia, że działa tylko raz, następny element interfejsu użytkownika będzie miał indeks z równy 10.000, powodując ponownie problem.

— Andrea Mauro

8

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);
    }
});

— IPad
źródło

2

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">

— Harry B.
źródło

2

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

— raviraj shimpi
źródło

0

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ął.

— pgee70
źródło

0

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ą?

— Andrea Mauro
źródło

-1

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)

— avall
źródło

1

Z jakiegoś powodu ustawienie indeksu Z przez CSS nie działa. jQuery po prostu przypisuje własną wartość z-index. Znalazłem jednak rozwiązanie (patrz odpowiedź poniżej)

— Martijn

-1

dodaj następujące elementy

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

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

— Zeeshan Ali
źródło

-1

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.

— Yasel
źródło