带有自动完成 jqueryui 的 UIKIT 3 模态

Question

我有这个功能，可以发布一个带有变量的下拉菜单，然后如果我单击将其插入到输入中，我的问题是我关闭了模态中使用的 div。我想了解问题出在哪里，或者是否有解决方案，我想每次我输入 div 模态时，参数 bg-close 和 esc-close 都是 false，如果我完成，我会将它们重置为 true在框内写'输入。我不知道如何帮助...

这是函数获取问题：

$(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

发生这种情况是因为自动完成结果不在 uk-modal div 内部，如果您单击 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"
        });
});

带有自动完成 jqueryui 的 UIKIT 3 模态

UIKIT 3 Modal with autocomplete jqueryui

javascript

jquery-ui

getuikit