自动完成输入字段在引导选项卡中不起作用

Question

我正在做一个 Web 开发项目，我正在那里使用引导选项卡。我正在使用添加和删除输入字段部分动态创建它们，根据我使用 ajax 在同一页面中创建选项卡的输入数量。

在那个选项卡中，我有相同的表单和相同的输入字段。该表单中有一个具有自动完成功能的输入字段。我正在将数据从 mysql 带到该字段。我的问题是自动完成功能只在第一个标签中起作用在其他标签中不起作用。自动完成字段标签是Responsible

这是我的功能。

function autocompletT() {
  var min_length = 0;
  var keyword = $('#responsible_id').val();
  if (keyword.length >= min_length) {
    $.ajax({
      url: 'ajax_refresh2.php',
      type: 'POST',
      data: {keyword:keyword},
      success:function(data){

        $('#responsible_id_list').show();
        $('#responsible_id_list').html(data);

        $('#responsible_id_list li').click(function() {

          var txx = $(this).text();
          var tcust = $(this).val();

         });

      }
    });
  } else {
    $('#responsible_id_list').hide();
  }

}

  // set_item : this function will be executed when we select an item
function set_item(item) {
  // change input value
  $('#responsible_id').val(item);
  // hide proposition list
  $('#responsible_id_list').hide();
}

我的部分代码

<div class="col-md-6 entire_div">
            <div class="panel with-nav-tabs panel-primary">
                <div class="panel-heading">
                    <ul class="nav nav-tabs">
                        <?php
                             for ($row = 0; $row < $agenda_size; $row++) {
                                 $p_agenda = $mAgenda[$row];   
                                 $row_plus = $row + 1;
                        ?>
                                <li><a href="<?php echo '#'.$row_plus?>" data-toggle="tab"><?php echo $p_agenda; ?></a></li>
                        <?php

                                }   
                        ?>
                    </ul>
                </div>

                <div class="panel-body">
                    <div class="tab-content">

                        <?php
                             for ($row = 0; $row < $agenda_size; $row++) {
                                 $p_agenda = $mAgenda[$row]; 
                                 $row_plus = $row + 1;    
                        ?>
                                <div class="tab-pane fade" id="<?php echo $row_plus;?>">




  <!-- form -->
  <form class="ws-validate">  

  <div class="form-group"> 
    <label for="responsible_id" class="control-label">Responsible</label>
    <input type="text" class="form-control" id="responsible_id" name="zip" placeholder="Select Responsible Person" onkeyup="autocompletT()" >
    <ul id="responsible_id_list"></ul>
  </div>  

  <div class="form-group"> 
    <button id="submit_btn" class="btn btn-primary">Add</button>
<!--     <input id="submit_btn" type="submit" value="Add"> -->

  </div>     

</form>  


    <div class="row">

        <div class="col-md-12">

          <div class="table-responsive">

            <table id="mytable" class="table table-bordred table-striped">

              <thead>

                <th><input type="checkbox" id="checkall" /></th>
                 <th>Action</th>
                 <th>Start Date</th>
                 <th>Due Date</th>
                 <th>Status</th>
                 <th>Responsible</th>

              </thead>
    <tbody>


    </tbody>

</table>
   <div class="delete_b_class">

        <button id="delete_row" class="btn btn-danger">Delete Row</button>

   </div>

            </div>

        </div>
  </div>

<div class="submit_all_div">

  <input class="submit_all_b" id="submit" onclick="myDataSendFunction()" type="button" value="Submit">

</div> 

                                </div>
                        <?php

                                }   
                        ?>

                    </div>
                </div>
            </div>
  </div>

Answer 1

ID 是唯一的

• 每个元素只能有一个 id
• 每个页面只能有一个具有该 ID 的元素

类不是唯一的

• 您可以在多个元素上使用同一个类。

• 您可以在同一个元素上使用多个类。

您可能正在使用您的 php 代码创建这么多 #responsible_id 和 #responsible_id_list。

因此，ID 必须是唯一的。在此处为每个搜索字段（即 principal_id ）和列表（即 Responsible_id_list ）使用唯一 ID。

您可以从这里得到一个想法：- 从输入中删除 onkeyup="autocompletT" 函数并像这样添加 jquery 事件。然后找到下一个 responsible_id_list 然后填充列表并将列表附加到它。

$('.responsible_id').keyup(function(){
     var min_length = 0;
     var keyword = $(this).val() ;
     ///others codes

     //say
     var list='';
     $(this).next('.responsible_id_list').html(list);

})

Answer 2

您可能需要每次都重新初始化输入的自动完成功能。通过this 问题获得更详细的图片。这应该可以解决您的疑虑