3

更新在使用 edge 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

更改 div.token-input-dropdown 的样式 en css 并将 z-index:1 替换为 z-index:1005。

于 2013-08-12T06:17:47.107 回答
2

这是这个库的一个已知问题(github上的 issue #94 )。您可以从此处收集已修补的文件以解决问题。

于 2012-08-15T08:20:14.693 回答
0

我对您的 HTML 进行了一些处理,似乎设置 zindex:1005 会在对话框中显示下拉菜单。

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

但是,如果您移动对话框,自动完成下拉菜单会停留在之前的位置。

于 2012-08-15T23:47:33.650 回答
0

这个jQuery代码为我解决了隐藏问题(感谢@user2192014和这个想法的答案):

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