Autocomplete input field not working in bootstrap tabs

Question

I am working on a web development project and I am using bootstrap tabs there. I am dynamically creating them using add and remove input field section, according to that number of inputs I am creating the tabs in the same page using ajax.

In that tabs I have the same form with same input fields. There is a input field with autocomplete function in that form. I am taking data from mysql to that field. My problem is autocomplete is only working in the first tab not in the others. Autocomplete field label is Responsible

This is my function.

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

Portion of My code

<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>

sharif2008 · Answer 1 · 2017-03-17T11:16:18.040

ids are unique

Each element can have only one id
Each page can have only one element with that id

classes are NOT unique

You can use the same class on multiple elements.
You can use multiple classes on the same element.

Probably, you are creating so many #responsible_id and #responsible_id_list with your php code.

So, as IDs must be unique. use the a unique ID for each search field (which is responsible_id ) and list (which is responsible_id_list ) here.

You can get a idea from here:- remove onkeyup="autocompletT" function from the input and add jquery event like this. then find the next responsible_id_list then populate list and append list to it.

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

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

})

i put class instead of id, then after i selected a name from any tab that name apply to all fields in every tab. how should i created different ids according to the number of tabs.? — D.Madu, Mar 17 '17 at 10:28
@D.Madu please check the updates. let me know if anything required — sharif2008, Mar 17 '17 at 17:49

score -1 · Answer 2 · edited May 23 '17 at 12:25

-1

You might need to re-initialize the autocomplete on the inputs every time. Go through this question to get a braoder picture. This should solve your concerns

edited May 23 '17 at 12:25

Community

1
1

answered Mar 17 '17 at 07:52

Anshul Verma

1,065
1
9
26

Autocomplete input field not working in bootstrap tabs

2 Answers2