CODEWITHSUNDEEP
htmltwitter-bootstrapjquery-ui
Roman Rdgz
Roman Rdgz

Reputation: 13254

Jqueryui autocomplete does not work inside a Bootstrap model

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">&times;</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?

Upvotes: 1

Views: 462

Answers (3)

E.M
E.M

Reputation: 176

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/

Upvotes: 3

Nidhi
Nidhi

Reputation: 1443

Add CSS below:

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

Upvotes: 0

J.Dev
J.Dev

Reputation: 39

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.

Upvotes: 0

Related Questions