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"
        });
});