jQuery-UIオートコンプリートがjQuery-UIダイアログに表示されない

ダイアログにあるjQueryUIオートコンプリートがあります。古いバージョンのjQuery/jQueryUIでは、返された値のリストを表示しますが、最新のバージョンでは表示されません。さらに、jQuery/jQueryUIの新バージョンでもうまくいきません。明らかに、私は何か違うことが起こっていますが、私はそれが何であるかを特定することはできません。私はz-indexを変更するためにCSSを使うことができると理解していますが、これはほとんどハックしていないようです。jQuery-UIオートコンプリートがjQuery-UIダイアログに表示されない

次の2つのライブの例をご覧ください。

http://jsbin.com/uciriq/3/（jQueryの1.4.3とjQueryUI 1.8.4を使用して）

http://jsbin.com/uciriq/2/（jQueryの1.9.1とjQueryUI 1.10.3を使用）

見られる（以上適用が "見えない" 述べた）のよう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>

EDIThttp://jqueryui.com/upgrade-guide/1.10/で記述し、以下の重複として私はjQueryUIダイアログへの変更を信じて、私の問題の原因です。私はそれらを最もうまく適用する方法が本当にわかりませんし、アドバイスをいただければ幸いです。

追加されたappendToオプション（＃7948）これまで、ダイアログは、他のスタッキングコンテキストとの競合を避けるために、DOMの最後の要素であることを保証するために、常に本体に追加されていました。しかし、より柔軟性を持たせ、スタッキングロジックを簡素化するために、appendToオプションが追加され、デフォルトでボディに追加されます。詳細については、APIドキュメントを参照してください。

削除されたスタックオプション（＃8722）以前スタックオプションがサポートされていたダイアログで、フォーカスを合わせてダイアログを先頭に移動するかどうかを決定しました。これが常にそうであるべきであるので、opitonは削除されました。

削除されたzIndexオプション（＃8729）スタックオプションと同様に、適切なスタック実装ではzIndexオプションは不要です。 z-indexはCSSで定義され、スタック内は、フォーカスされたダイアログが親の最後の「スタッキング」要素であることを保証することによって制御されるようになりました。

出典

2013-07-19 user1032531

最近、jQueryUIがダイアログウィジェットに幾分大きな変更を加え、http://jqueryui.com/upgrade-guide/1.10/で説明されているようにスタッキングをどのように扱うのかを学びました。私はまだこれがどのように当てはまるかはわかりませんが、確信しています。ありがとう！ – user1032531

最初のダイアログを作成してから、オートコンプリートを作るためにあなたのコードを変更し

。例えば

これで正常に動作し、自動完了の結果が表示されます。

出典

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

それとも別のハックの答えのために、あなたはz位置を移動するためのjQueryを使用することができます。うまくいけば、誰かが私の2つより良い答えを思いつきます。

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

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

出典

2013-07-19 20:29:08 user1032531

ありがとう、ありがとう！ – Zsolti

別のハック答え。問題の子を変更するには、jQueryの代わりにCSSを使用します。

.ui-autocomplete {z-index:1000}

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

出典

2013-07-19 20:37:37 user1032531

ドロップダウンが初めて開かれたときにのみ、z-indexを変更すると、ダイアログウィンドウが表示され、z-indexがアップグレードされます。

また、私はダイアログの作成順序を変更してオートコンプリートを行うのは面倒でしたが（大規模なWebサイト、たくさんのページを考えると）、偶然openDialogをラップした私自身のopenPopup関数がありました。だから私は

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

]ダイアログが第一開口部に焦点を当て、すなわちを持っており、オートコンプリートが閉じているときに、それぞれのオートコンプリートリストのZインデックスが更新されるたびにハック、次のを思い付きました。

出典

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インデックス/ 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、このような古い質問を掘るために、私をそれは、私のようなGoogleからここに来る人々を助けるかもしれないと思う。

出典

2015-11-24 13:04:10

jQuery-UIオートコンプリートがjQuery-UIダイアログに表示されない

答えて

関連する問題