UIKIT 3 Modal with autocomplete jqueryui

Question

I have this function that releases a drop-down menu with variables which then if I click inserts it into an input, my problem is that I close the div used in modal. I would like to understand where the problem is or if there is a solution, I thought that every time I type the div modal with false the parameters bg-close and esc-close and I reset them to true if I finish writing inside the box 'input. I don't know how to help…

This's the function get problem:

$(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;
            }
        });
});

I know the problem lies in the fact that the autocomplete div is not part of the uk-modal div set. Could you insert the autocomplete result into a specific div?

Answer 1

It happens because the autocomplete result is not inside the uk-modal div if you click on an element outside that div, uikit closes.

So you have to put this in your code, of course the id you can change for something else

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