Die automatische Vervollständigung von jQuery-UI wird nicht gut angezeigt. Z-Index-Problem

Ich implementiere derzeit die automatische Vervollständigung der jQuery-Benutzeroberfläche in meinem Kunden-Webshop. Das Problem ist: Das Element, in dem sich die automatische Vervollständigung befindet, hat einen höheren Z-Index als der Z-Index der automatischen Vervollständigung. Ich habe versucht, den Z-Index für die automatische Vervollständigung manuell festzulegen, aber ich habe das Gefühl, dass die jQuery-Benutzeroberfläche dies überschreibt.

In der Tat ist meine Frage ein Duplikat der Autocomplete-Vorschlagsliste falscher Z-Index. Wie kann ich das ändern? , aber da es keine Antwort gab, dachte ich darüber nach, es noch einmal zu versuchen.

Jede Hilfe ist willkommen!

Martijn

Verwenden Sie z-indexund!important

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

Bei der Suche habe ich dieses Thema gefunden (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Anscheinend ist die einzige Möglichkeit, den Stil der Autocomplete-Box zu ändern, die Verwendung von Javascript:

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

Ändern Sie den Z-Index des übergeordneten Div. Das Menü für die automatische Vervollständigung enthält den Z-Index des Div + 1

Im CSS von jQuery UI:

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

Versuchen Sie dies, Sie können den Z-Index zur Laufzeit oder Initialisierung bearbeiten

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

Wenn Sie in der Lage sind, einen höheren Z-Index für die automatische Vervollständigung der Texteingabe zu erzwingen, ist dies die Lösung für Ihr Problem.

Die Liste der Optionen für die automatische Vervollständigung der jQuery-Benutzeroberfläche berechnet den Z-Index-Wert, indem der Z-Index der Texteingabe verwendet wird, an die er angehängt wird, und 1 zu diesem Wert hinzugefügt wird.

Sie können der Texteingabe also einen Z-Index von 999 geben. Die automatische Vervollständigung hat einen Z-Index-Wert von 1000

Entnommen aus http://bugs.jqueryui.com/ticket/5489

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

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

Sehen Sie sich auch an, wo Sie den Artikel anhängen. Ich bin auf dieses Problem gestoßen, als ich die Autovervollständigung an ein inneres Div angehängt habe, aber als ich die Autovervollständigung an das Body-Tag angehängt habe, ist das Problem verschwunden.

Wenn Sie jquery-ui-Dialoge verwenden, müssen Sie die Dialoge sorgfältig initialisieren, bevor die automatische Vervollständigung oder die automatische Vervollständigung unter dem Dialogfeld angezeigt wird.

Schauen Sie sich diese Antwort an. JQuery UI Autocomplete in einem modalen UI-Dialog - Vorschläge werden nicht angezeigt?

Probieren Sie es trotzdem in Ihrem CSS aus (vor dem Laden des Skripts), nicht in Firebug:

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

In meinem Fall funktioniert dies und erstellt Z-Indizes wie: 100x (zum Beispiel 1002)

Fügen Sie Folgendes hinzu

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

in der Datei jquery-custom-ui.css (oder der minimierten, wenn Sie sie verwenden).

Für diejenigen Entwickler, die dieses Plugin noch verwenden. Versuche dies:

.acResults
{
    z-index:1;
}

Für mich war mit z-Index genug: 1, stellen Sie den Wert ein, den Sie in Ihrem Fall benötigen.