Jquery-UI -AutoComplete Not Working With BootBox Modal

Question

Iam in a trouble by creating an ' Auto Complete Text Field ' in BootBox Modal.It does not showing any response when i search a keyword but works perfectly in normal pages(without modal). This is the script which i used to call a bootbox modal alongwith autocomplete function.

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

and Here is my '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>

I had reffered a fiddle https://jsfiddle.net/sv9L7cnr/ which is working perfectly , but sadly it does not working with my bootbox .So is there any solution to make a AutoComplete TextField in bootbox modal.Working solutions will be appreciated.Thank You

Answer 1

You have to call the autocomplete after the bootbox is loaded. Try this:

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

    });

  });

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