Jquery Autocomplete funktioniert nicht in Bootstrap Modal

Question

Ich habe Code von Jquery Autocomplete verwendet und Daten von PHP-Array geladen. Dieser Code funktioniert einwandfrei, wenn ich "Auto Complete Text Box" auf der gleichen Seite verwende, aber nicht funktioniert, wenn ich das gleiche "Auto Complete Text Box" im Bootstrap Modal Dialog benutze.

Im Anschluss an mein Code

------------------ JS-Code ------------------ -------

var availableTags=[]; // json data coming from php code 
function showAutoComplete(element_id) { 
    $("#" + element_id).autocomplete({ 
     source: availableTags, 
     minLength: 1, 
     select: function (event, ui) { 
      $("#" + element_id).val(ui.item.label); // display the selected text 
      $("#" + element_id + "Id").val(ui.item.value); // save selected id to hidden input 
      return false; 
     }, 
     change: function (event, ui) { 
      $("#" + element_id + "Id").val(ui.item ? ui.item.value : 0); 
     } 
    }); 
    console.log(availableTags); 
} 

------------------------ Modalcode ---------- -

<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog" style="width: 800px !important;"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Add Corporate Experience</h4> 
     </div> 
     <div class="modal-body"> 
     <div class="col-md-12" id="career_profile_form"> 
      <div class="form-group"> 
      <div class="col-sm-6"> 
       <div class="ui-widget"> 
       <input type="hidden" name="careerFormCompanyId" id="careerFormCompanyId"/> 
       <input placeholder="Company Name" id="careerFormCompany" onkeyup="showAutoComplete('careerFormCompany')" name="careerFormCompany" class="form-control"/> 
       </div> 
      </div> 
      <div class="col-sm-3"> 
       <input type="text" name="careerFormRole" id="careerFormRole" placeholder="Role" class="form-control"/> 
      </div> 
      <div class="col-sm-3"> 
       <input type="text" name="careerFormYears" id="careerFormYears" placeholder="Years" class="form-control"/> 
      </div> 
      </div> 
      <?php 
      if (isset($aCompanyQuestionList) && is_array($aCompanyQuestionList) && !empty($aCompanyQuestionList)) { 
       $col = 0; 
       foreach ($aCompanyQuestionList as $key => $value) { 
        ?> 
      <?php if ($col == 0) { ?> 
      <h3 id="other_company_heading1"></h3> 
      <p>Please provide appropriate responses about your experience in this company from a gender diversity perspective .<br/> Your responses are fully confidential, not displayed or stored in your profile. They are added to the overall company’s ratings given by others and averaged out</p> 
      <?php } ?> 
      <div class="col-md-12"> 
      <?php 
       $career_rating1 = "1"; 
       if (isset($aUnSerialized) && is_array($aUnSerialized) && !empty($aUnSerialized)) { 
        $career_rating = $aUnSerialized[$col + 1]; 
       } 
       ?> 
      <div class="row"> 
       <div class="col-sm-8 list-style-job"> 
       <ol> 
        <li><span><?php echo $col + 1; ?></span><?php echo $value->question; ?></li> 
       </ol> 
       </div> 
       <div class="col-sm-4 rating"> 
       <input type="hidden" name="questionId[]" value="<?php echo $value->id; ?>"/> 
       <input type="radio" class="career_ratings" id="career_star<?php echo $col; ?>1" name="career_rating_answer[<?php echo $col; ?>]" value="1" /> 
       <label for="career_star<?php echo $col; ?>1" title=""></label> 
       <input type="radio" class="career_ratings" id="career_star<?php echo $col; ?>2" name="career_rating_answer[<?php echo $col; ?>]" value="2"/> 
       <label for="career_star<?php echo $col; ?>2" title=""></label> 
       <input type="radio" class="career_ratings" id="career_star<?php echo $col; ?>3" name="career_rating_answer[<?php echo $col; ?>]" value="3"/> 
       <label for="career_star<?php echo $col; ?>3" title=""></label> 
       <input type="radio" class="career_ratings" id="career_star<?php echo $col; ?>4" name="career_rating_answer[<?php echo $col; ?>]" value="4"/> 
       <label for="career_star<?php echo $col; ?>4" title=""></label> 
       </div> 
      </div> 
      </div> 
      <?php 
      $col++; 
      } 
      } 
      ?> 
      <div class="col-sm-12"> 
      <input type="button" name="save" id="save" value="Save Career Profile" class="btn btn-lg btn-primary nextbuttnn" onclick="saveCareer()"/> 
      </div> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Autovervollständigung hat appendTo-Option, die diese Autovervollständigung an erforderliches Element anfügt.

können Sie tun, folgen als

var availableTags=[]; // json data coming from php code 
function showAutoComplete(element_id) { 
    $("#" + element_id).autocomplete({ 
     source: availableTags, 
     minLength: 1, 
     appendTo: "myModal", 
     select: function (event, ui) { 
      $("#" + element_id).val(ui.item.label); // display the selected text 
      $("#" + element_id + "Id").val(ui.item.value); // save selected id to hidden input 
      return false; 
     }, 
     change: function (event, ui) { 
      $("#" + element_id + "Id").val(ui.item ? ui.item.value : 0); 
     } 
    }); 
    console.log(availableTags); 
} 

prüfen diese. https://api.jqueryui.com/autocomplete/#option-appendTo