Question

通过在 BootBox 模式中创建“自动完成文本字段”来解决问题。当我搜索关键字但在正常情况下完美运行时，我没有显示任何响应页面（没有模态）。这是我用来调用bootbox模式以及自动完成功能的脚本。

 <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>

我已经提到了一个完美无缺的小提琴https://jsfiddle.net/sv9L7cnr/，但遗憾的是它不能与我的 bootbox 一起工作。所以有任何解决方案可以在bootbox模式下制作一个AutoComplete TextField。工作解决方案将是谢谢。谢谢你

Answer 1

加载bootbox后必须调用自动完成功能。试试这个：

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
        });

    });

  });

DatePicker 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 -AutoComplete不使用BootBox模式

1 个答案: