TokenInput加上jQuery UI的對話框衝突

UPDATE這似乎不再是最新的FX/Chrome瀏覽器使用邊緣問題的jQueryTokenInput加上jQuery UI的對話框衝突

問題：自動完成將是對話的背後，如果你移動它，該對話框將移動到頁面之外。

調查

我已經檢查

Why does jquery ui dialog mangle my jquery.tokeninput.js autocomplete?

而且閱讀github上要求

問題93 Result list doesn't display properly when in jQuery-ui modal dialog和
問題94 Dropdown positioning issues

但我仍然有同樣的問題，我認爲是最新的一切（TokenInput JS和CSS從github jQuery TokenInput）。

DEMOS和代碼

DEMO1：TokenInput如何運作時的jQuery UI被註釋掉
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>

來源

2012-05-04 mplungjan

這是該庫的已知問題（github上的問題＃94）。您可以從here收集修補的文件來解決問題。

來源

2012-08-15 08:20:14

正如你所看到的，我已經籤問題94 – mplungjan

對不起，我錯過了。 –

問題＃94的補丁文件修復了不顯示下拉菜單的問題。但是，它會在ui對話框中顯示一個垂直滾動條。 –

我對你的HTML做了一點工作，好像設置了zindex：1005顯示了對話框的下拉菜單。

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

但是，如果您移動對話框，自動填充下拉列表將保留在上一個位置。

來源

2012-08-15 23:47:33

太好了 - 我無法在9月中旬測試，所以可能需要一段時間才能看到你的建議是否有效 – mplungjan

我上傳了代碼[here]（http://pastehtml.com/view/ c8ewt0pa0.html）供您測試。 –

謝謝 - 在FX15 OSX中，當我輸入它並且建議是透明的時候，該字段變短。它似乎在Chrome也更好的OSX – mplungjan

更改div.token-input-dropdown的樣式en css，並使用z-index：1005重新指定z-index：1。

來源

2013-08-12 06:17:47 user2192014

問題不再存在。感謝您的輸入 – mplungjan

這是真正的答案 – Behrens

謝謝！提高Z指數解決了問題！ :) –

這個jQuery代碼解決了我（的想法感謝@ user2192014和this answer）隱藏的問題：

$(".token-input-dropdown-facebook, .token-input-list-facebook").css("z-index","9999");

來源

2015-06-03 13:01:50

TokenInput加上jQuery UI的對話框衝突

回答

相關問題