Question

我正在尝试在Bootstrap模式中使用JqueryUI自动完成，但它不起作用：

<!-- 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代码：

$(function() {
  var locationList = ['London', 'Bilbao', 'Paris', 'Madrid', 'Moscow', 'Berlin'];
  $("#locationSelector").autocomplete({
    source: locationList
  });
});

我在jsfiddle中重新创建了一个示例：Link

经过一番研究，我认为它与隐藏的模态内容有关，但我不知道如何解决它。有什么建议吗？

Answer 1

首先，您应该编辑 css ，然后将自动填充更高z-index添加，因为bootstrap .modal类已z-index: 1050;，因此您甚至可以看到自动填充任何高于1050的数字都应该这样做

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

其次，您不能在同一页面中使用相同的ID。解决问题的一种方法是改变

id - ＆gt;类

将 HTML input字段从id="locationSelector"更改为class="locationSelector"，并将 JS jQuery选择器从$("#locationSelector")更改为$(".locationSelector")。

我还提供了一个工作示例：https://jsfiddle.net/dh4e49z7/33/

Answer 2

您的输入字段具有相同的ID（locationSelector）

<div class="ui-widget">
 <label for="locationSelector">City: </label>
 <input id="locationSelector">
</div>

和

<div class="modal-body">
 <div class="ui-widget">
  <label for="locationSelector">City: </label>
  <input id="locationSelector">
 </div>
</div>

如果同一页面在不同的输入字段上有多个相同的ID，则无效。

Answer 3

在下面添加CSS：

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

Jqueryui自动完成在Bootstrap模型中不起作用

3 个答案: