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

【问题标题】：UIKIT 3 Modal with autocomplete jqueryui带有自动完成 jqueryui 的 UIKIT 3 模态
【发布时间】：2020-04-07 06:25:26
【问题描述】：

我有这个函数，它释放一个带有变量的下拉菜单，然后如果我单击将其插入输入，我的问题是我关闭了模态中使用的 div。我想了解问题出在哪里或者是否有解决方案，我认为每次我输入带有 false 的 div 模式时，参数 bg-close 和 esc-close 并且如果我在框中完成写入，我会将它们重置为 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 中？

【问题讨论】：

欢迎来到 Stack Overflow。请提供a_performance 的示例。
我知道问题在于自动完成 div 不是 uk-modal div 集的一部分。您能否将自动完成结果插入到特定的 div 中？

标签： javascript jquery-ui getuikit

【解决方案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"
        });
});

【讨论】：