Question

我使用了一些Jquery Autocomplete代码并从php数组加载数据。当我使用＆＃34;自动完成文本框＆＃34;时，此代码工作正常。在同一页面，但使用相同的＆＃34;自动完成文本框＆＃34;在Bootstrap模态对话框中。

以下是我的代码

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

------------------------模态代码---------------------

<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

自动填充功能具有appendTo选项，该选项会将此自动填充功能附加到所需元素。

您可以按照以下操作

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

检查一下。 https://api.jqueryui.com/autocomplete/#option-appendTo

Jquery Autocomplete在Bootstrap Modal中不起作用

1 个答案: