自動完成輸入字段在引導標籤中不起作用

Question

我正在開發一個web開發項目，並在那裏使用引導標籤。我使用添加和刪除輸入字段部分動態創建它們，根據輸入的數量，我使用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

您可能需要重新初始化輸入上每一次自動完成。通過this問題得到一個braoder圖片。這應該解決您的關注

Answer 2

ID是唯一的

• 每個元素只能有一個ID
• 每個頁面都可以使用該ID只有一個元素

類不獨特

• 您可以在多個元素上使用相同的類。

• 您可以在同一元素上使用多個類。

也許，你正在創造這麼多#responsible_id和#responsible_id_list與PHP代碼。

因此，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); 

})