Question

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

在该选项卡中，我使用相同的表单和相同的输入字段。在该表单中有一个带自动完成功能的输入字段。我正在从mysql中获取数据到该字段。我的问题是自动填充只能在第一个标签中使用而不在其他标签中。自动填充字段标签为负责任

这是我的功能。

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必须是唯一的。在这里使用每个搜索字段（这是responsible_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问题来获得一个braoder图片。这应该可以解决您的问题

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

2 个答案: