jQueryUI自動完成不與對話框和zIndex一起工作

Question

我遇到了一個對話框中jQueryUI自動完成的有趣問題。

我的對話框HTML看起來像這樣：

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

當我運行在上面的HTML jQueryUI的自動完成功能，它可以完美運行。

當我打開它在Firebug使用對話框

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

然後，我可以看到自動完成仍然是工作。它請求並接收結果，但我不再看到輸入字段下方的選項列表。

我的想法是，這與對話框中的zIndex比自動完成菜單給出的zIndex有關，但我不確定。 我仍在研究發生了什麼的確切細節，但我希望這裏有人會對我有一些想法。

編輯 我試着從對話框中刪除zIndex，我的自動完成開始顯示出來。 不幸的是，我需要這個zIndex值來獲取菜單欄的可怕的高zIndex，這是我無法改變的（無法訪問該代碼的區域）。因此，如果有一種方法可以將zIndex添加到自動完成功能中，那就太棒了;在此之前，我可能會從對話框中刪除zIndex，並確保它不會顯示在菜單欄區域周圍。

Answer 1

嘗試appendTo選項設置爲"#copy_dialog"：

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

此選項指定元件的自動完成菜單附加到。通過將菜單附加到對話框上，菜單應該繼承正確的Z-index。

Answer 2

我記得有與自動完成和zIndex的一個類似的問題，不得不通過指定appendTo選項來解決這個問題：$(selector).autocomplete({appendTo: "#copy_dialog"})

，如果你有一個定位的元素內自動完成這也是有用的。我遇到的具體問題是固定位置元素內的自動完成，在主體滾動時停留在原位。自動完成顯示正確，但隨後與身體滾動，而不是保持固定。

Answer 3

通過自己追求這個問題，我發現appendTo必須在對話框打開之前設置。這似乎也適用於設置（或修改）源屬性。

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

這可能只是對話框打開的副作用，或者不正確地處理元素。但事情發生的順序似乎很重要。

Answer 4

當使用jQuery UI 1.10時，你不應該混淆z-索引（http://jqueryui.com/upgrade-guide/1.10/#removed-stack-option）。 appendTo選項可用，但會將顯示限制在對話框的高度。

要解決這個問題：確保自動完成元件與正確的DOM順序：自動完成 .insertAfter（對話框。父（））

例

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

更新對話框中，點擊後的z-index問題

自動完成的z指數似乎在對話框上點擊後改變（如MatteoC所報道）。下面的解決方法似乎解決這個問題：

見琴：https://jsfiddle.net/sv9L7cnr/

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

Answer 5

此鏈接爲我工作。

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

上午使用jQuery-UI-1.10.3。

我在jquery對話框的「open」事件中配置了自動完成組合框。

Answer 6

appendTo：該菜單應該附加到哪個元素。當值 爲空時，輸入字段的父項將被檢查爲「ui-front」類的 。如果找到具有「ui-front」類的元素，則菜單 將被追加到該元素。無論價值如何，如果找不到 元素，菜單將被追加到主體。

這意味着<div id="copy_dialog" class="ui-front">將做的伎倆。沒有必要使用選項appendTo，這不適合我。

Answer 7

更改z-index僅在第一次打開下拉菜單時生效，一旦關閉，對話窗口意識到它已被「欺騙」並升級其z-index。

另外對我來說，改變對話框的創建順序和自動完成確實是一個麻煩（認爲大網站，大量的網頁），但偶然我有我自己的openPopup函數，包裝openedDialog。所以，我想出了下面的技巧

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

每次對話都有1日開時，自動完成關閉的重點，即每一個自動完成列表的z-index的得到更新。

Answer 8

'appendTo'選項並不總是有效。

最令人震驚的是，它不會顯示超過對話框的高度，而且，如果您使用的是第三方實用工具（例如DataTables編輯器），則在對話框，輸入等時不總是能夠控制。正在創建，當它們連接到DOM時，它們擁有什麼ID等等。

這似乎總是工作：

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

這裏（有的失敗，每當我將鼠標懸停在項目，並再次返回），但是這是 唯一爲我工作提到

嘗試一切在所有情況下：

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

Answer 10

user1357172的solution爲我工作，但在我看來，這需要兩個imprevements。

如果appendTo設置爲null，我們可以找到最接近.ui-front元素而不是.ui-dialog，因爲我們autocomplete應該已經被連接到它。然後，我們應該更改z-index僅用於相關小部件（相關的ul列表），而不是使用類.ui-autocomplete.ui-front更改所有現有元素。我們可以通過使用elem.autocomplete('widget')

解決方案找到相關的部件：

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此解決方案，但它看起來有點哈克，所以它不是可能是最好的一個。

Answer 11

對我而言有效的是上述文章的組合。 我添加了myModal ID而不是body，並添加了關閉事件。

$("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. 創建對話框
2. 激活自動完成

此信號jQuery的自動完成是一個對話框，它可用來處理Z-信息索引。

Answer 14

超簡單的解決方案。增加自動完成的z-index。當它是活躍的，我很確定你想要它頂部:)

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