bootstrap select refresh and show data-live-search="true"

Question

i am using jquery plugin bootstrap select

my code

$('.selectpicker').on('hidden.bs.select', function (e) {
      $('.selectpicker').selectpicker({
      style: 'btn-info',
      size: 4,
      liveSearch: true
    });
});

refreshing in code

  $(document).ready(function(){
  var i=1;
  $("#add_row").click(function(){
  $('#addr'+i).html("<td>"+ (i+1) +"</td><td><select class='selectpicker'
   data-'live-search=true' name='name"+i+"'><option>Mustard</option>
  <option>Ketchup</option><option>Relish</option></select> </td><td><input  
  name='mail"+i+"' type='text' placeholder='Mail'  class='form-control 

 input-md'>
   </td><td><input  name='mobile"+i+"' type='text' placeholder='Mobile'  
   class='form-control input-md'></td>");

  $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');

  $('.selectpicker').selectpicker('refresh');

  i++; 
 });

but after refreshing i am not getting data-live-search="true" class added in newly refreshed dropdown.

any suggestion? I need data-live-search="true" in every dropdown after fresh command in this plugin.

my html

<div class="container">
<div class="row clearfix">
    <div class="col-md-12 column">
        <table class="table table-bordered table-hover" id="tab_logic">
            <thead>
                <tr >
                    <th class="text-center">
                        #
                    </th>
                    <th class="text-center">
                        Name
                    </th>
                    <th class="text-center">
                        Mail
                    </th>
                    <th class="text-center">
                        Mobile
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr id='addr0'>
                    <td>
                    1
                    </td>
                    <td>
                     <select class="selectpicker" data-live-search="true">
                      <option>Mustard</option>
                      <option>Ketchup</option>
                      <option>Relish</option>
                    </select>
                    </td>
                    <td>
                    <input type="text" name='mail0' placeholder='Mail' 
      class="form-control"/>
                    </td>
                    <td>
                    <input type="text" name='mobile0' placeholder='Mobile' 
     class="form-control"/>
                    </td>
                </tr>
                <tr id='addr1'></tr>
            </tbody>
        </table>
        </div>
     </div>
      <a id="add_row" class="btn btn-default pull-left">Add Row</a><a 
     id='delete_row' class="pull-right btn btn-default">Delete Row</a>
    </div>  

Answer 1

You have

data-'live-search=true'

it should be

data-live-search='true'

$('.selectpicker').on('hidden.bs.select', function(e) {
  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 4,
    liveSearch: true
  });
});

$(document).ready(function() {

  var i = 1;

  $("#add_row").click(function() {

    $('#tab_logic').append('<tr id="addr' + i + '"></tr>');

    $('#addr' + i).html("<td>" + i + "</td><td><select class='selectpicker' data-live-search='true' name = 'name" + i + "'><option >Mustard</option><option>Ketchup</option><option>Relish</option></select></td><td><input name='mail" + i + "'type='text'placeholder='Mail' class= 'form-control input-md'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md'/></td>");

    $('.selectpicker').selectpicker('refresh');

    i++;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<table id="tab_logic">
</table>

<button id="add_row">Add Table Row</button>