jQuery-UI自動完成不會顯示在jQuery-UI對話框中

我有一個駐留在對話框中的jQueryUI自動完成。對於jQuery/jQueryUI的一些老版本，它顯示返回值的列表，而對於最新版本，則不顯示。此外，即使使用新版本的jQuery/jQueryUI，它仍然可以正常運行在一個頁面上，其中一些其他內容也不會很好。顯然，我有一些不同的東西，但我似乎無法確定它是什麼。我知道我可以使用css來改變z-index，但是這看起來有點駭人聽聞。jQuery-UI自動完成不會顯示在jQuery-UI對話框中

請參閱以下兩個實例。

http://jsbin.com/uciriq/3/（用了jQuery 1.4.3和1.8.4 jQueryUI的）

http://jsbin.com/uciriq/2/（用了jQuery 1.9.1和1.10.3 jQueryUI的）

如所看到的（或多個適用的陳述「不見」），返回的jQuery 1.9.1/jQueryUI 1.10.3自動完成匹配顯示在對話框後面。

允許返回的自動填充匹配顯示的最佳解決方案是什麼？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
     <title>autocomplete with dialog</title> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script> 
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script> 
     <!-- 
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js" type="text/javascript"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js" type="text/javascript"></script> 
     --> 

     <script type="text/javascript"> 
      $(function() { 
       $("#search").autocomplete({ 
        source: [ "one", "two", "three" ] 
       }); 
       $("#dialog").dialog(); 
      }); 
     </script> 

    </head> 
    <body> 
     <div id="dialog" class="dialog" title="Testing"> 
      <div class="ui-widget"> 
       <label for="search">one, two, three: </label> 
       <input id="search" /> 
      </div> 
     </div> 

    </body> 
</html>

編輯我相信，通過http://jqueryui.com/upgrade-guide/1.10/以下描述和複製的改變jQueryUI的對話框是我的問題的原因。我不確定如何最好地應用它們，並會感謝任何建議。

添加了appendTo選項（＃7948）以前，對話框始終附加到主體以確保它們是DOM中的最後一個元素，以避免與其他堆疊上下文發生衝突。但是，爲了實現更大的靈活性並簡化堆疊邏輯，已添加了appendTo選項，該選項默認爲正文。查看API文檔以獲取更多信息。

刪除堆棧選項（＃8722）對話框先前支持堆棧選項，該選項確定對話框是否應在聚焦時移動到頂部。由於這應該總是如此，該選擇已被刪除。

刪除了zIndex選項（＃8729）與堆棧選項類似，zIndex選項對於正確的堆棧實現是不必要的。 z-index在CSS中定義，現在通過確保聚焦對話框是其父代中最後一個「堆疊」元素來控制堆疊。

來源

2013-07-19 user1032531

我最近了解到，jQueryUI對對話框小部件做了一些重大更改，以及如何處理http://jqueryui.com/upgrade-guide/1.10/中描述的堆疊。我不知道這是如何適用的，但確實如此。謝謝 – user1032531

更改您的代碼來創建對話框，然後再進行自動完成。例如

$(function() 
{ 
    $("#dialog").dialog(); 
    $("#search").autocomplete({ 
    source: [ "one", "two", "three" ] 
    }); 
});

它應該然後正常工作，讓您看到自動完成的結果。

來源

2013-07-19 20:54:41 keyneom

謝謝Keyneom，那肯定就是爲什麼當我的測試頁沒有時，這個頁面工作的原因。我把它們列入了錯誤的順序。雖然這可行（http://jsbin.com/uciriq/9/），但需要確保它們從不將它們放在錯誤的順序中，這可能會變得棘手。 – user1032531

您可以嘗試讓自動完成功能成爲對話框打開事件的一部分，或者您可以嘗試創建一個包裝器，您可以在創建一個對話框時使用該包裝器，該對話框具有自動完成功能。它可能會簡化事情。 – keyneom

您的公開活動建議可能有意義。請注意我編輯的原始帖子，其中引用了http://jqueryui.com/upgrade-guide/1.10/中描述的與堆疊相關的最新更改。讓我想知道是否有一些更好的方法來處理這個問題。 – user1032531

不知道這是否是最佳答案，但可以在對話框後移動自動完成結果。

$("#search").autocomplete("widget").insertAfter($("#dialog").parent());

http://jsbin.com/uciriq/4/

來源

2013-07-19 20:24:33 user1032531

還是其他的hackish的回答，您可以使用jQuery移動z位置。希望有人提出比我的兩個更好的答案。

$("#search").autocomplete("widget").css('z-index',1000);

http://jsbin.com/uciriq/5/

來源

2013-07-19 20:29:08 user1032531

它的工作原理，謝謝！ – Zsolti

另一個hackish的答案。使用CSS而不是jQuery來修改問題子代。

.ui-autocomplete {z-index:1000}

http://jsbin.com/uciriq/6/edit

來源

2013-07-19 20:37:37 user1032531

更改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的得到更新。

來源

2014-07-25 18:43:37 Johann

這個解決方案爲我工作。 – Ray

這已經顯示在JQuery UI版本> = 11.0.0中。

票貼在這裏：http://bugs.jqueryui.com/ticket/10696

編輯：更新票號

來源

2014-11-11 20:30:40 Kevin

你正確地猜測的z-index/appendTo有話跟你的問題。

您需要設置appendTo - 選擇自動完成到對話框中的元素，然後自動完成顯示正確。

警告：如果結果列表比對話框中的可用空間長，您將得到一個滾動條。

我編輯您的jsbin反映這一點：http://jsbin.com/vavevugoqi/

JS：

$("#search").autocomplete({ 
    appendTo: "#myContainer", 
    source: [ "one", "two", "three" ] 
});

HTML：

<div id="dialog" class="dialog" title="Testing"> 
    <div id="myContainer" class="ui-widget"> 
     <label for="search">one, two, three: </label> 
     <input id="search" /> 
    </div> 
</div>

PS：Sry基因挖了這樣一個老問題，但我認爲它可以幫助一些人從谷歌（像我一樣）來到這裏。

來源

2015-11-24 13:04:10

jQuery-UI自動完成不會顯示在jQuery-UI對話框中

回答

相關問題