13

ダイアログにあるjQueryUIオートコンプリートがあります。jQuery/jQueryUI の一部の古いバージョンでは、返された値のリストが表示されますが、最新バージョンでは表示されません。さらに、うまく機能していないように見える新しいバージョンのjQuery/jQueryUIでも、他の多くのことが進行しているページで正しく動作しています。明らかに、何か違うことが起こっていますが、それが何であるかを特定できないようです。css を使用して z-index を変更できることは理解していますが、これはほとんどハックのようです。

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

編集http://jqueryui.com/upgrade-guide/1.10/で 説明され、以下に複製されている jQueryUI ダイアログへの変更が問題の原因であると考えています。それらを最もよく適用する方法がよくわかりません。アドバイスをいただければ幸いです。

appendTo オプションが追加されました (#7948) 以前は、他のスタック コンテキストとの競合を避けるために、ダイアログは常に DOM の最後の要素になるようにボディに追加されていました。ただし、柔軟性を高めてスタック ロジックを簡素化するために、デフォルトで body に設定される appendTo オプションが追加されました。詳細については、API ドキュメントを参照してください。

スタック オプションを削除 (#8722) ダイアログは以前、スタック オプションをサポートしていました。これは常に当てはまるはずなので、オプションは削除されました。

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

4

7 に答える 7

25

コードを変更して、最初にダイアログを作成し、次にオートコンプリートを作成します。例えば

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

その後、正常に機能し、オートコンプリートの結果を確認できるようになります。

于 2013-07-19T20:54:41.510 に答える
5

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

.ui-autocomplete {z-index:1000}

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

于 2013-07-19T20:37:37.570 に答える