Bootstrap jQuery UI completion in the background

Question

I’m making an autocomplete with jQuery UI and it’s working as it should, but the list of autocomplete is "below" the modal,

image below to see....

When the letter "A" was typed in the "patient" form the auto complete worked, displaying the database records with patients who have the letter "A" in the name, but the list of the autocomplete is "below" of the modal....

In the screenshot you can see that the last name of the autocomplete list is "Goulart"

I need help so that the list is presented in the foreground, ie "at the top" of the modal.

Answer 1

Put a z-index: 1050 in class .ui-autocomplete, which is the class of ul from the autocomplete list. Just insert into the CSS:

.ui-autocomplete{
   z-index: 1050;
}

Depending on the order of the CSS libs uploads, you will need to include a !important:

.ui-autocomplete{
   z-index: 1050 !important;
}

Behold:

$( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );

.ui-autocomplete{
   z-index: 1050 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Abrir modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

         <div class="ui-widget">
           <label for="tags">Digite "a": </label>
           <input id="tags">
         </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>