jQueryUom completamento automatico non funziona con dialog e zIndex

Question

Ho trovato un problema interessante con il completamento automatico di jQueryUI in una finestra di dialogo.

mia finestra HTML simile a questa:

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

Quando eseguo il completamento automatico jQueryUI di quanto sopra HTML, funziona perfettamente.

Quando apro l'alto utilizzando la finestra di

$('#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; 
}); 

Poi nel Firebug, vedo di completamento automatico è ancora funzionante. Richiede e riceve risultati, ma non vedo più un elenco di opzioni sotto il campo di input.

Il mio pensiero è che questo ha qualcosa a che fare con zIndex nella finestra di dialogo è molto più grande di quello che dà il menu di completamento automatico, ma non lo so per certo. Sto ancora studiando i dettagli esatti di ciò che sta accadendo, ma spero che qualcuno qui avrà qualche idea per me.

Modifica Ho provato a rimuovere zIndex dalla finestra di dialogo e il mio completamento automatico inizia a mostrare. Purtroppo, ho bisogno che il valore zIndex per superare il terribilmente alto zIndex della barra dei menu, che non posso cambiare (non hanno accesso a quella zona del codice). Quindi, se c'è un modo per aggiungere uno zIndex al completamento automatico, sarebbe fantastico; fino ad allora, probabilmente rimuoverò zIndex dalla finestra di dialogo e assicurarmi che non compaia nell'area della barra dei menu.

Answer 1

Prova impostando l'opzione appendTo-"#copy_dialog":

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

Questa opzione specifica quale elemento menu di completamento automatico viene aggiunto. Aggiungendo il menu alla finestra di dialogo, il menu dovrebbe ereditare lo z-index corretto.

Answer 2

Ricordo avere un problema simile con completamento automatico e zIndex, e ha dovuto risolvere il problema specificando l'opzione appendTo: $(selector).autocomplete({appendTo: "#copy_dialog"})

Questo è anche utile se si dispone di un completamento automatico all'interno di un elemento posizionato. Il problema specifico che avevo era un completamento automatico all'interno di un elemento di posizione fisso che rimaneva in posizione mentre il corpo principale scorreva. Il completamento automatico veniva visualizzato correttamente ma quindi scorreva con il corpo anziché rimanere fisso.

Answer 3

Attraverso perseguire questo problema io stesso ho scoperto che appendTo deve essere impostato prima che la finestra di dialogo è aperta. Lo stesso sembra applicarsi all'impostazione (o alla modifica) della proprietà sorgente.

$("#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") 

Questo potrebbe essere solo un sottoprodotto di ciò che apre la finestra di dialogo o non indirizza correttamente l'elemento. Ma l'ordine che le cose accadono sembra avere importanza.

Answer 4

Quando si utilizza jQuery UI 1.10, non si deve scherzare con z-indexes (http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option). L'opzione appendTo funziona, ma limiterà la visualizzazione all'altezza della finestra di dialogo.

per risolvere il problema: assicurarsi che l'elemento di completamento automatico è nell'ordine DOM corretto con: autocomplete .insertAfter (dialogo.genitore())

Esempio

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

Aggiornamento per il problema z-index dopo dialogo fare clic

z-index del completamento automatico sembra cambiare dopo un clic nella finestra di dialogo (come riportato da MatteoC). La soluzione qui di seguito sembra risolvere il problema:

See violino: https://jsfiddle.net/sv9L7cnr/

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

Answer 5

Questo collegamento ha funzionato per me.

https://github.com/taitems/Aristo-jQuery-UI-Theme/issues/39

sto usando jQuery-ui-1.10.3.

Ho configurato la casella combinata di completamento automatico all'interno dell'evento "aperto" della finestra di dialogo jquery.

Answer 6

appendTo: A quale elemento deve essere aggiunto il menu. Se il valore è nullo, i genitori del campo di input verranno controllati per una classe di "ui-front". Se viene trovato un elemento con la classe "ui-front", il menu verrà aggiunto a quell'elemento. Indipendentemente dal valore, se non viene trovato alcun elemento , il menu verrà aggiunto al corpo.

Ciò significa che lo <div id="copy_dialog" class="ui-front"> farà il trucco. Non c'è bisogno di usare l'opzione appendTo, che non ha funzionato per me.

Answer 7

La modifica dello z-index funziona solo la prima volta che si apre il menu a discesa, una volta chiusa, la finestra di dialogo si rende conto che è stata "ingannata" e aggiorna il suo z-index.

Anche per me cambiare l'ordine di creazione della finestra di dialogo e il completamento automatico era davvero una seccatura (pensate al grande sito web, tonnellate di pagine) ma per caso ho avuto la mia funzione openPopup che ha avvolto OpenDialog. Così mi si avvicinò con la seguente incidere

$("#dialog").dialog({ focus: function() { 
    var dialogIndex = parseInt($(this).parent().css("z-index"), 10); 
    $(this).find(".ui-autocomplete-input").each(function (i, obj) { 
     $(obj).autocomplete("widget").css("z-index", dialogIndex + 1) 
    }); 
}); 

Ogni volta che la finestra ha il focus vale a dire il 1 ° di apertura e quando il completamento automatico è chiuso, di ogni lista di completamento automatico z-index viene aggiornato.

Answer 8

L'opzione "appendTo" non funziona sempre.

In modo egregio, non verrà visualizzato oltre l'altezza della finestra di dialogo, ma anche, se si utilizza un'utility di terze parti (ad esempio l'editor DataTables) non si ha sempre il controllo su una finestra di dialogo, un input, ecc. vengono creati, quando sono collegati al DOM, quali ID hanno, ecc.

Questo sembra sempre lavoro:

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

Answer 9

provato tutto ciò di cui qui (alcuni fallito ogni volta che il mouse sopra oggetti e tornare di nuovo), ma questo è l'unico cosa che ha funzionato per me in tutti i casi:

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

Answer 10

user1357172 di solution ha funzionato per me, ma a mio parere ha bisogno di due imprevements.

Se appendTo è impostato su null, possiamo trovare la .ui-front elemento più vicino al posto di .ui-dialog, perché la nostra autocomplete dovrebbe essere già collegato ad esso. Quindi dovremmo cambiare il z-index solo per il widget correlato (elenco ul correlato) invece di modificare tutti gli elementi esistenti con la classe .ui-autocomplete.ui-front. Possiamo trovare widget di correlati utilizzando elem.autocomplete('widget')

Soluzione:

elem.autocomplete({ 
    open: function(event, ui){ 
     var onTopElem = elem.closest('.ui-front'); 
     if(onTopElem.length > 0){ 
      var widget = elem.autocomplete('widget'); 
      widget.zIndex(onTopElem.zIndex() + 1); 
     } 
    } 
}); 

BTW questa soluzione funziona ma sembra po 'hacky, quindi non è probabilmente il migliore.

Answer 11

Ciò che ha funzionato per me era una combinazione del post di cui sopra. Ho aggiunto l'ID myModal al posto del corpo e ho aggiunto anche l'evento close.

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

Answer 12

open:function(event){ 

     var target = $(event.target); 
     var widget = target.autocomplete("widget"); 
     widget.zIndex(target.zIndex() + 1); 

}, 

Answer 13

1. creare la finestra di
2. Attiva completamento automatico

Questo segnali a jQuery il completamento automatico è in una finestra e ha le informazioni a disposizione per gestire Z- indici.

Answer 14

Soluzione semplicissima. Aumentare lo z-index per il completamento automatico. Quando è attivo sono abbastanza sicuro di volerlo sopra :)

.ui-autocomplete { 
z-index: 2000; 
}