UIKIT 3 帶自動完成 jqueryui 的模態

Question

我有這個 function 釋放一個帶有變量的下拉菜單，然后如果我單擊將其插入輸入，我的問題是我關閉了模態中使用的 div。 我想了解問題出在哪里或者是否有解決方案，我認為每次我輸入帶有 false 的 div 模式時，參數 bg-close 和 esc-close 並且如果我在框中完成寫入，我會將它們重置為 true '輸入。 我不知道如何幫助...

這是 function 得到問題：

$(function() {
        var a_performance = ["one", "two"];

        $("#form-title-performace").on("keydown", function(event) {
            if(event.keyCode === $.ui.keyCode.TAB &&
                $(this).autocomplete("instance").menu.active) {
                event.preventDefault();
            }
          }).autocomplete({
            minLength: 2,
            source: function( request, response ) {
              response( $.ui.autocomplete.filter(
                a_performance, extractLast( request.term ) ) );
            },
            focus: function() {
              return false;
            },
            select: function( event, ui ) {
              var terms = split( this.value );
              terms.pop();
              terms.push( ui.item.value );
              terms.push( "" );
              this.value = terms.join( ", " );
              return false;
            }
        });
});

我知道問題在於自動完成 div 不是 uk-modal div 集的一部分。 您可以將自動完成結果插入特定的 div 嗎？

Answer 1

發生這種情況是因為如果您單擊該 div 之外的元素，自動完成結果不在 uk-modal div 內，uikit 將關閉。

所以你必須把它放在你的代碼中，當然你可以把id換成別的東西

$(function() {
        var a_performance = ["one", "two"];

        $("#form-title-performace").on("keydown", function(event) {
            if(event.keyCode === $.ui.keyCode.TAB &&
                $(this).autocomplete("instance").menu.active) {
                event.preventDefault();
            }
          }).autocomplete({
            minLength: 2,
            source: function( request, response ) {
              response( $.ui.autocomplete.filter(
                a_performance, extractLast( request.term ) ) );
            },
            focus: function() {
              return false;
            },
            select: function( event, ui ) {
              var terms = split( this.value );
              terms.pop();
              terms.push( ui.item.value );
              terms.push( "" );
              this.value = terms.join( ", " );
              return false;
            },
              appendTo: "#div-result"
        });
});