Jquery-UI - 自动完成不适用于 BootBox 模态

Question

我在 BootBox 中创建“自动完成文本字段”遇到麻烦 Modal.It 没有显示任何响应当我搜索关键字但在普通页面（无模态）中完美运行时。这是我用来调用引导框模式和自动完成功能的脚本。

 <script>
  $("#bootbox-options-general").on('click', function() {
    bootbox.dialog({
            message : $("#myModalGeneral").html(),
            title : "Edit Job General",
            className : "modal-darkorange",
     }); 
  });

  var availableTags = ["ActionScript","AppleScript","Scala"];
  $( "#country" ).autocomplete({
     source: availableTags,
     appendTo:$("#myModalGeneral"),
  });
</script>

这是我的 'MyBootBoxMoadal.html'

<div id="myModalGeneral" style="display: none;">
 <div class="row">
    <form method="POST" action="edit_job_info id="myForm3">
      <div class="form-group">
        <input type="text" id="country" class="form-control"/>
      </div>
    </form>
 </div>

我已经提交了一个工作正常的 fiddle https://jsfiddle.net/sv9L7cnr/，但遗憾的是它不能与我的 bootbox 一起工作。那么有什么解决方案可以在bootbox modal.Working 解将 appreciated.Thank 你

Answer 1

您必须在加载引导框后调用自动完成功能。试试这个：

Codepen

html

<div id="myModalGeneral" style="display: none;">
 <div class="row">
   <div class="col-md-6">
    <form method="POST" action="edit_job_info" id="myForm3">
      <div class="form-group">
        <input autocomplete="off"  type="text" id="country" class="form-control country"/>
      </div>
    </form>
   </div>
 </div>
</div>
 <button id="bootbox-options-general">Click</button>

css

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

js

  $("#bootbox-options-general").on('click', function() {
     var box = bootbox.dialog({
            message : $("#myModalGeneral").html(),
            title : "Edit Job General",
            className : "modal-darkorange"                   

      });
    box.bind('shown.bs.modal', function(){
        var availableTags = ["ActionScript","AppleScript","Scala"];
        $( ".country" ).autocomplete({
          source: availableTags
        });

    });

  });

日期选择器DIV

 <div class="col-sm-6">
  <label>MBL Date</label>
  <div class="input-group">
    <form:input path="mblOrMawbDate"
            class="form-control date-picker" placeholder="Choose Date" id="date-picker" data-date-format="dd-mm-yyyy"
                                value="${job.mblOrMawbDateString}" />
   <span class="input-group-addon"> <i class="fa fa-calendar">  </i></span>
</div>

Jquery-UI - 自动完成不适用于 BootBox 模态

Jquery-UI -AutoComplete Not Working With BootBox Modal

javascript

jquery

html

bootstrap-modal

bootbox