Jqueryui autocomplete does not work inside a Bootstrap model - html

Question

I'm trying to use JqueryUI autocomplete inside Bootstrap modal, but it doesn't work:
<!-- This one Works -->
<div class="ui-widget">
<label for="locationSelector">City: </label>
<input id="locationSelector">
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#citySelectionModal">
Launch demo modal
</button>
<!-- Modal (the autocomplete does not work here) -->
<div class="modal fade" id="citySelectionModal" tabindex="-1" role="dialog" aria-labelledby="citySelectionModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="citySelectionModalLabel">Select city</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="ui-widget">
<label for="locationSelector">City: </label>
<input id="locationSelector">
</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>
<button type="button" class="btn btn-danger">Clear</button>
</div>
</div>
</div>
</div>
Js code:
$(function() {
var locationList = ['London', 'Bilbao', 'Paris', 'Madrid', 'Moscow', 'Berlin'];
$("#locationSelector").autocomplete({
source: locationList
});
});
I recreated an example in jsfiddle: Link
After some research, I think it is related to the modal contents being hidden, but I don't know how to solve it. Any suggestion?

Answer 1

First of all you should edit you css and add your autocomplete higher z-index because bootstrap .modal class has z-index: 1050; so that you could even see the autocomplete any higher number than 1050 should do it
.ui-autocomplete {
z-index: 1060;
}
Secondly you can't use same IDs in the same page. One way to fix it would be to change
id -> class
Change your HTML input fields from id="locationSelector" to class="locationSelector" and change JS jQuery selector from $("#locationSelector") to $(".locationSelector").
I also provided a working example: https://jsfiddle.net/dh4e49z7/33/

Answer 2

your input field have same ids (locationSelector)
<div class="ui-widget">
<label for="locationSelector">City: </label>
<input id="locationSelector">
</div>
and
<div class="modal-body">
<div class="ui-widget">
<label for="locationSelector">City: </label>
<input id="locationSelector">
</div>
</div>
if same page has multiple same ids on different input fields it will not work.

Answer 3

Add CSS below:
.ui-autocomplete {
z-index: 4000 !important;
}