Autocomplete jQuery UI in background in Bootstrap modal

I am doing an autocomplete with jQuery UI and it is working as it should, but the autocomplete list is "at the bottom" of the modal,

In the image below to see....

insert the description of the image here

When the letter "A" was typed in the form "patient" auto complete worked, displaying the bank records with patients that has the letter "A" in the name, but the autocomplete list is "at the bottom" of the modal....

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

I need help so that the list is presented in 1st plane ,i.e. "on top" of the modal.

Author: Sam, 2019-03-06
Source

1 answers

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

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

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

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

See: 

$( 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>
 3
Author: Sam, 2019-03-06 13:34:27