29

jquery uiダイアログ内でjquery uiオートコンプリートウィジェットを使用しています。検索テキストを入力すると、テキスト ボックスがインデントされますが (ui-autocomplet-loading)、候補は表示されません。

var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];

$("#company").autocomplete({        
    source : availableTags ,
minLength: 2
});

company は、オートコンプリートを添付するテキスト ボックスの ID です。

私はそれがaz indexかもしれないと思ったので、これを設定しました：

.ui-autocomplete, .ui-menu, .ui-menu-item {  z-index: 1006; }

しかし、それはまだ表示されません。オートコンプリートを「通常の」ページに配置すると、正常に機能します。

jquery ui バージョン 1.8.2 を使用しています。どこを見るべきかのアイデアはありますか？

4

17 に答える 17

73

この同じ問題を検索したときにこの回答に出くわしましたが、どの解決策も私が望んでいたものではありませんでした。

使用するappendToとうまくいきました...オートコンプリートアイテムは本来あるべき場所に表示されましたが、ダイアログウィンドウが不適切に再配置されたdiv要素の文字化けした混乱に完全に投げ込まれました。

したがって、自分の css ファイルで、次のように作成しました。

ul.ui-autocomplete {
    z-index: 1100;
}

1100 は少しやり過ぎだと思いますが、安全にプレイしたかっただけです。それはうまく機能し、KISS メソッドに準拠しています。

jQueryUI 1.10.2 で jQuery 1.9.2 を使用しています。

于 2013-04-17T05:22:29.003 に答える
14

jQuery UI 1.10 を使用する場合、z-index をいじってはいけません ( http://jqueryui.com/upgrade-guide/1.10/#re​​moved -stack-option )。このappendToオプションは機能しますが、表示がダイアログの高さに制限されます。

それを修正するには: autocomplete 要素が正しい DOM 順序になっていることを確認してください: autocomplete .insertAfter( dialog .parent())

例

 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-index が変化するようです (MatteoC の報告による)。以下の回避策はこれを修正するようです：

フィドルを参照してください: https://jsfiddle.net/sv9L7cnr/

// initialize autocomplete
input.autocomplete({
    source: ...,
    open: function () {
        autoComplete.zIndex(dlg.zIndex()+1);
    }
});
于 2013-06-18T21:06:10.477 に答える
7

同じダイアログボックス内の 1 つまたは複数のオートコンプリートの場合:

// init the dialog containing the input field
 $("#dialog").dialog({
      ...
 });

// initialize autocomplete
 $('.autocomplete').autocomplete({        
      source: availableTags,
      minLength: 2
 }).each(function() {
      $(this).autocomplete("widget").insertAfter($("#dialog").parent());
 });
于 2014-07-23T15:15:21.093 に答える
5 
    $("#company").autocomplete({        
    source : availableTags ,
    appendTo : $('#divName')
    minLength: 2
});

注: $('#divName') divName はモーダル ボディの名前になります。

例：

<form id="exportOrder">
        <div class="input-group">
            <input type="text" id="accountReferenceSearch" placeholder="Type Account Reference to search..." class="form-control" style="width:500px">
        </div>
    </div>
</form>

self.AttachAutoComplete = function () {
                    $('#accountReferenceSearch').focus(function () {
                        $('#accountReferenceSearch').autocomplete({
                            source: function (request, response) {},
                            minLength: 2,
                            delay: 300,
                            appendTo: $("#exportOrder")
                        });
                    });
                }
于 2016-02-24T06:19:58.557 に答える
2

私は最近同じ問題を抱えていました。これをcssファイルに追加すると解決しました：

.ui-autocomplete-input, .ui-menu, .ui-menu-item {  z-index: 2006; }

最初に z-index の初期値 を試し1006ましたが、うまくいきませんでした。値を大きくするとうまくいきました。

于 2014-09-08T20:42:52.723 に答える
1

私もこの問題を抱えていました。私は、ブートストラップとselect2を備えたUserFrostingで作業していますが、コアにjquery-uiがありません。私のオートコンプリートは、script タグと$(document).ready がモーダル フォームの html の後にあるモーダル ポップアップ内にありました。あらゆる種類の存在しない競合を追跡し、select2 (v 4) をコンボボックスにしようとした後、css ハックに戻り、これが機能しました。

.ui-autocomplete {z-index: 1061 !important;}

私の環境は

  • jquery 1-11.2を使用したUserFrosting
  • ブートストラップ-3.3.2、
  • ブートストラップモーダル
  • select2 v3.5.1
  • jquery-ui-1.11.4 (dot-luv テーマ)
于 2016-07-04T05:41:45.273 に答える
0

私の場合、css にスタイルを追加しても機能しませんが、zIndexプロパティを jQuery ui 要素コンストラクターに正確に追加した後は、魅力的に機能します。

于 2012-10-15T14:44:56.203 に答える
0

これは私にとってはうまくいきました：

ul.ui-front {
    z-index: 1100;
}
于 2015-08-25T11:38:48.053 に答える
0

次のメソッドを JavaScript に追加し、body 要素の onload イベントから呼び出します。

//initialization
function init(){
    var autoSuggestion = document.getElementsByClassName('ui-autocomplete');
    if(autoSuggestion.length > 0){
        autoSuggestion[0].style.zIndex = 1051;
    }
}

それは私にとってはうまくいきます:)モーダルダイアログの計算されたスタイルを見て、z-indexが何であるかを確認することでこれを取得しました。したがって、関数が行うのは、jqueryによって作成された自動提案ボックスを取得し（クラス名の1つによって異なる場合がありますが、アイデアは同じです）、cssを変更して、より1ポイント高いz-indexを含めることですモーダルの z-index (これは 1050 でした)

于 2013-06-06T01:00:00.643 に答える