3

更新これは、エッジ jQuery を使用する最新の Fx/Chrome ではもはや問題ではないようです

問題: オートコンプリートがダイアログの背後にあり、移動するとダイアログがページの外に移動します。

調査

私はすでにチェックしました

jquery uiダイアログが私のjquery.tokeninput.jsオートコンプリートを台無しにするのはなぜですか?

そしてgithubリクエストを読む

しかし、私はまだすべての最新であると信じているもの（github jQuery TokenInputの TokenInput JS および CSS ）と同じ問題を抱えています。

デモとコード

  • DEMO1 : jQuery UI がコメントアウトされている場合の TokenInput の動作
  • DEMO2 : 機能させたいもの
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>     
<link rel="stylesheet"        href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="jquery.tokeninput.js"></script>
<link rel="stylesheet" href="token-input-facebook.css" type="text/css" />

<button id="filterBut">FILTER</button>

<div id="dialog-form" title="Filter" style="border:1px solid black">
    <p class="validateTips">Enter text contained in the respective fields</p>

    <form>
    <fieldset>
        <label for="name">Field1</label><br/><input type="text" name="Flt1" id="Flt1" class="text ui-widget-content ui-corner-all" style="width:300px"/><br/><br/>
        <label for="email">Field2</label><br/><input type="text" name="Flt2" id="Flt2" value="" class="text ui-widget-content ui-corner-all" style="width:300px" />
    </fieldset>
    </form>
</div>
<script>
$(function() {  
   $("#Flt1, #Flt2").tokenInput([
      {id: 7, name: "Ruby"},
      {id: 11, name: "Python"},
      {id: 13, name: "JavaScript"},
      {id: 17, name: "ActionScript"},
      {id: 19, name: "Scheme"},
      {id: 23, name: "Lisp"},
      {id: 29, name: "C#"},
      {id: 31, name: "Fortran"},
      {id: 37, name: "Visual Basic"},
      {id: 41, name: "C"},
      {id: 43, name: "C++"},
      {id: 47, name: "Java"}
    ],{theme:"facebook"});

  $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 400,
            width: 460,
            modal: true
  });                        
  $( "#filterBut" ).click(function() {

  // suggestion from 
  // https://stackoverflow.com/questions/6669654/why-does-jquery-ui-dialog-mangle-my-jquery-tokeninput-js-autocomplete
    $("#dialog-form script").remove();
  // does not seem to change anything


    $( "#dialog-form" ).dialog( "open" );
  });

});
</script>         
              </div>     
            </div>
          </form>
4

4 に答える 4

2

これは、このライブラリの既知の問題です（githubの問題＃94 ）。ここからパッチを適用したファイルを収集して、問題を修正できます。

于 2012-08-15T08:20:14.693 に答える
2

div.token-input-dropdown の CSS でスタイルを変更し、z-index:1 を z-index:1005 に置き換えます。

于 2013-08-12T06:17:47.107 に答える
0

このjQueryコードは、私にとって非表示の問題を解決します（@ user2192014に感謝し、アイデアに対するこの回答に感謝します）：

$(".token-input-dropdown-facebook, .token-input-list-facebook").css("z-index","9999");
于 2015-06-03T13:01:50.133 に答える
0

私はあなたの HTML に少し取り組みましたが、 zindex:1005 を設定すると、ダイアログの上にドロップダウンが表示されるようです。

 ],{theme:"facebook", zindex:1005});

ただし、ダイアログを移動すると、オートコンプリート ドロップダウンは前の位置に留まります。

于 2012-08-15T23:47:33.650 に答える