Die automatische Vervollständigung von jQueryUI funktioniert nicht mit Dialog und zIndex

Ich bin auf ein interessantes Problem mit der automatischen Vervollständigung von jQueryUI in einem Dialogfeld gestoßen.

Mein Dialog-HTML sieht so aus:

<div id="copy_dialog">
    <table>
        <tbody>
            <tr>
                <th>Title:</th>
                <td><input type="text" class="title" name="title"></td>
            </tr>
            <tr>
                <th>Number:</th>
                <td><input type="text" name="number"></td>
            </tr>
        </tbody>
    </table>
</div>

Wenn ich die automatische Vervollständigung von jQueryUI auf dem obigen HTML ausführe, funktioniert es perfekt.

Wenn ich es über den Dialog öffne

$('#copy').click(function()
{
    $('#copy_dialog').dialog({
        autoOpen: true,
        width: 500,
        modal: false,
        zIndex: 10000000,
        title: 'Duplicate',
        buttons: {
            'Cancel': function()
            {
                $(this).dialog('close');
            },
            'Save': function()
            {
                $(this).dialog('close');
            }
        }
    });

    return false;
});

Dann kann ich in FireBug sehen, dass die automatische Vervollständigung immer noch funktioniert. Es werden Ergebnisse angefordert und empfangen, aber ich sehe keine Liste mit Optionen mehr unter dem Eingabefeld.

Mein Gedanke ist, dass dies etwas damit zu tun hat, dass der zIndex im Dialogfeld viel größer ist als das, was das Autocomplete-Menü anzeigt, aber ich weiß es nicht genau. Ich recherchiere immer noch genaue Details darüber, was passiert, aber ich hoffe, dass jemand hier eine Idee für mich hat.

Bearbeiten
Ich habe versucht, den zIndex aus dem Dialogfeld zu entfernen, und meine automatische Vervollständigung wird angezeigt. Leider brauche ich diesen zIndex-Wert, um über den schrecklich hohen zIndex der Menüleiste hinwegzukommen, den ich nicht ändern kann (ich habe keinen Zugriff auf diesen Bereich des Codes). Wenn es also eine Möglichkeit gäbe, der Autovervollständigung einen zIndex hinzuzufügen, wäre das fantastisch; bis dahin entferne ich wahrscheinlich einfach den zIndex aus dem Dialog und stelle sicher, dass er nicht um den Menüleistenbereich herum auftaucht.

Versuchen Sie die Einstellung appendTo Option zu "#copy_dialog":

$(/** autocomplete-selector **/)
    .autocomplete("option", "appendTo", "#copy_dialog");

Diese Option gibt an, an welches Element das Autocomplete-Menü angehängt wird. Durch Anhängen des Menüs an den Dialog sollte das Menü den korrekten Z-Index erben.

appendTo: An welches Element das Menü angehängt werden soll. Wenn der Wert null ist, werden die Eltern des Eingabefelds auf eine Klasse von “ui-front” überprüft. Wenn ein Element mit der Klasse „ui-front“ gefunden wird, wird das Menü an dieses Element angehängt. Wenn kein Element gefunden wird, wird das Menü unabhängig vom Wert an den Hauptteil angehängt.

Das bedeutet, dass <div id="copy_dialog" class="ui-front"> wird den Trick machen. Die Option muss nicht verwendet werden appendTodas hat bei mir nicht funktioniert.

Die Option „appendTo“ funktioniert nicht immer.

Am ungeheuerlichsten wird es nicht über die Höhe des Dialogfelds hinaus angezeigt, aber auch, wenn Sie ein Dienstprogramm eines Drittanbieters (z. B. DataTables-Editor) verwenden, haben Sie nicht immer die Kontrolle darüber, wann ein Dialogfeld, eine Eingabe usw. erstellt werden. wann sie an das DOM angehängt sind, welche IDs sie haben usw.

Dies scheint stets Arbeit:

$(selector).autocomplete({
    open: function(event, ui){
        var dialog = $(this).closest('.ui-dialog');
        if(dialog.length > 0){
            $('.ui-autocomplete.ui-front').zIndex(dialog.zIndex()+1);
        }
    }
});

Wenn Sie jQuery UI 1.10 verwenden, sollten Sie nicht mit z-Indizes herumspielen (http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option). Das appendTo Option funktioniert, begrenzt die Anzeige jedoch auf die Höhe des Dialogs.

Um das Problem zu beheben: Stellen Sie sicher, dass sich das Autocomplete-Element in der richtigen DOM-Reihenfolge befindet, mit: Autovervollständigung.insertAfter(Dialog.Elternteil())

Beispiel

 var autoComplete,
     dlg = $("#copy_dialog"),
     input = $(".title", dlg);

 // initialize autocomplete
 input.autocomplete({
     ...
 });

 // get reference to autocomplete element
 autoComplete = input.autocomplete("widget");

 // init the dialog containing the input field
 dlg.dialog({
      ...
 });

 // move the autocomplete element after the dialog in the DOM
 autoComplete.insertAfter(dlg.parent());

Update für Z-Index-Problem nach Dialogklick

Der Z-Index der Autovervollständigung scheint sich nach einem Klick auf den Dialog zu ändern (wie von MatteoC gemeldet). Die folgende Problemumgehung scheint dies zu beheben:

Siehe Geige: https://jsfiddle.net/sv9L7cnr/

// initialize autocomplete
input.autocomplete({
    source: ...,
    open: function () {
        autoComplete.zIndex(dlg.zIndex()+1);
    }
});

Ich erinnere mich, dass ich ein ähnliches Problem mit Autocomplete und zIndex hatte und es durch Angabe der appendTo-Option beheben musste: $(selector).autocomplete({appendTo: "#copy_dialog"})

Dies ist auch nützlich, wenn Sie innerhalb eines positionierten Elements eine automatische Vervollständigung haben. Das spezifische Problem, das ich hatte, war eine automatische Vervollständigung innerhalb eines Elements mit fester Position, das an Ort und Stelle blieb, während der Hauptteil gescrollt wurde. Die automatische Vervollständigung wurde korrekt angezeigt, scrollte dann aber mit dem Text, anstatt fest zu bleiben.

Als ich mich selbst mit diesem Problem beschäftigte, entdeckte ich das appendTo muss gesetzt werden, bevor der Dialog geöffnet wird. Dasselbe scheint für das Festlegen (oder Ändern) der source-Eigenschaft zu gelten.

$("#mycontrol").autocomplete({appendTo:"#myDialog",source:[..some values]})
$("#mycontrol").autocomplete("option","source",[...some different values]) // works

// doesn't work if the lines above come after
$("#myDialog").dialog("open")

Dies kann nur ein Nebenprodukt dessen sein, was dialog open tut, oder das Element nicht korrekt adressieren. Aber die Reihenfolge scheint wichtig zu sein.

Was für mich funktioniert hat, war eine Kombination aus dem obigen Beitrag. Ich habe die myModal ID anstelle von body hinzugefügt und auch das close-Ereignis hinzugefügt.

$("selector").autocomplete({
    ...
    appendTo: "#myModalId",    // <-- do this
    close: function (event, ui){
        $(this).autocomplete("option","appendTo","#myModalId");  // <-- and do this  
    }
});