web-dev-qa-db-ja.com

モーダルuiダイアログ内のjquery UIオートコンプリート-候補が表示されませんか？

私は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です。

私はそれがzインデックスかもしれないと思ったので、これを設定しました：

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

それでも表示されません。オートコンプリートを「通常の」ページに配置すると、正常に動作します。

私はjquery uiバージョン1.8.2を使用しています。どこを見ればいいの？

jquery-uijquery-ui-dialogjquery-ui-autocomplete
24
mango

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

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

だから私は自分のCSSファイルで、以下を作成しました：

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

1100は少しやり過ぎだと思いますが、安全にプレイしたかっただけです。うまく機能し、K.I.S.S。に準拠しています。方法。

私はjQuery 1.9.2でjQuery 1.9.2を使用しています。

67
DondeEstaMiCulo

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

修正するには：autocomplete。insertAfter（dialog。parent（）を使用して、オートコンプリート要素が正しいDOM順序になっていることを確認します。 ）

例

 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);
    }
});
13
mhu

私はこのようにブートボックスでそれを解決しました：

$( "#company" ).autocomplete({       
    source : availableTags ,
    appendTo: "#exportOrder"
});

結果リストをフォームに追加するだけです。

9
Allfarid Morales García

同じダイアログボックス内の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());
 });
7
Jader A. Wagner

autocompleteの実装で、appendTo: "#search_modal"を追加します。ここで、search_modalはモーダルのIDです。

5
Francisco Balam

Jquery.autocomplete.cssのdivに属性z-index:1500を追加することを解決しました。これは、Jquery UIダイアログが1000〜1005のZインデックスを配置するためです。

ul.auto-complete-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1500;
    max-height: 250px;
    overflow: auto;
}
3
kachar
    $("#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")
                        });
                    });
                }
3
Parth Patel

それが私に起こったとき、私は同じ問題を経験していました：

常にオートコンプリートを設定する前にダイアログを宣言してください。

私はそれらを入れ替えました、etvoilà！

オートコンプリートは、ターゲットとするINPUTを中心に構成します。ダイアログは、ターゲットとするコンテナの周りに新しいマークアップとCSSを作成します。ダイアログの背後、または画面外に表示される私の選択。

2
Charles St-Pierre

最近同じ問題がありました。これを私のcssファイルに追加すると、解決されました：

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

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

1
Anders

同じ問題がありました。 z-indexが十分に高く、上書きできないように、cssを更新しました。

.dropdown-menu {
  z-index: 9999 !important;
}

Bodyに追加すると、ドロップダウンが$ windowの子になるため、すべてのドロップダウンメニューを新しいz-indexにする必要があります。

0
farpaci

私の場合、CSSにスタイルを追加することはできませんが、zIndexプロパティをjQueryのui要素コンストラクターに正確に追加すると、チャームのように機能します。

0
Robert Isaev

私もこの問題を抱えていました。 bootstrapとselect2があるUserFrostingで作業していますが、コアにjquery-uiがありません。私のオートコンプリートは、スクリプトタグと$(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テーマ）
0
TauranJanitor

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

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

それは私のために機能します:)これは、モーダルダイアログの計算されたスタイルを見て、Zインデックスが何であるかを確認することで得られました。したがって、すべての関数は、jqueryによって作成された自動提案ボックスを取得し（クラス名の1つによって異なる場合がありますが、考え方は同じです）、CSSを変更して、Zインデックスを1ポイント以上高くします。モーダルのZインデックス（1050）

0
Corey Harden

Johann-Sの回答 here がうまくいきました。

ボタンにdata-focus = "false"を追加するか、次のようにモーダルを呼び出すリンクを追加するだけです

<button type="button" class="btn btn-primary" 
 data-toggle="modal" 
 data-focus="false"
data-target=".bd-example-modal-sm">Small modal</button>

このようにして、z-indexをいじったり、ブートストラップの強制フォーカスをオーバーライドしたりする必要はありません（呼び出されません）。

0
JHRS

同じ問題が発生しましたが、苦労した後、Firefoxを使用して解決策を見つけました。

chromeで、オートコンプリートビューが開いていて要素を検査する場合、コンポーネントをクリックすると非表示になります。

だが

Firefoxでは、それが継続的に表示されるため、ビューを見つけることができます。

それと同じことをして、z-indexを持つクラスを見つけました

z-index: 1000

だからこれをもっともっと

.pac-container{
    z-index: 999999;
}

このz-indexソリューションはすべてのユーザーには機能しない可能性がありますが、Firefoxの機能が間違いなく最適なソリューションを見つけるのに役立つと確信しています。

0
Dev Sabby

これを試して：-
my_modal ：モーダルID
appendToのautocompleteプロパティを使用

$("#input_box_id").autocomplete({<br> source:sourceArray/link,<br> appendTo :"#<i>my_modal</i>"<br> }); 参照： https://stackoverflow.com/a/22343584/5803974

0
Satish

これは私のためのトリックをしました：

ul.ui-front {
    z-index: 1100;
}
0
Zeljko Kozina