更新在使用 edge jQuery 的最新 Fx/Chrome 中,这似乎不再是问题
问题:自动完成将在对话框后面,如果您移动它,对话框将移出页面。
调查
我已经检查过了
为什么 jquery ui 对话框会破坏我的 jquery.tokeninput.js 自动完成功能?
并阅读 github 请求
- 问题 93在 jQuery-ui 模态对话框和
- issue 94下拉定位问题
但我仍然对我认为是最新的东西(来自github jQuery TokenInput的TokenInput JS 和CSS )有同样的问题。
演示和代码
<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>