List.jsは検索でJQueryデータを削除します

Question

JQueryでいっぱいになっているテーブルでList.jsでフィルタを検索しようとしています。

デモ： https://jsfiddle.net/aqszp8qa/2/

例：以下のjQueryで満たされている すべての 'アイテム'。 List.jsの検索を開始すると、入力と一致しないデータが削除されます。しかし、私がsearchinputをクリアすると、データは削除されたので、戻ってこない。

データを保存するにはどうしますか？

ありがとう..

HTML

<div class="col-md-2"> 
     <div class="panel-title">Make<span class="pull-right"><i class="fa fa-sort"></i></span> 
     </div> 

     <div id="makes"> 
      <div class="form-group has-feedback" style="margin-top: 5px;"> 
       <input type="text" class="form-control search input-sm" placeholder="make"/> 
       <span class="glyphicon glyphicon-search form-control-feedback"></span> 
      </div> 
      <div style="border: 1px solid #ccc; border-radius: 3px; height: 100%;" class="pre-scrollable"> 
       <table class="table-no-borders" id="make"> 
        <!-- IMPORTANT, class="list" have to be at tbody --> 
        <tbody class="list" id="make-table-body"> 

        </tbody> 
       </table> 
      </div> 
     </div> 
    </div> 

Javascriptを

var makeOptions = {valueNames: ['make']}; 
var makeList = new List('makes', makeOptions); 



$('.clickable-table-row').on('click', function() { 
    var id = $(this).data('vehicle-id'); 
    $('#make-table-body').empty(); 
    $.get('/api/get/makes/by' + '/' + id, function (data) { 
     $.each(data, function (i, object) { 
      var tr = createTableRow('make-id', object.id); 
      var td = createTableData('make', object.name); 
      $('#make-table-body').append(tr.append(td)); 
     }); 
    }); 
}); 

function createTableRow(data_attribute, attribute_value) { 
    return $('<tr></tr>').addClass('clickable-table-row').attr("data-" + data_attribute, attribute_value); 
} 

function createTableData(className, value) { 
    return $('<td></td>').addClass(className).text(value); 
} 

Answer 1

ソリューションは、動的にロードが終了した後に新しいリストを作成することです。

参照：https://jsfiddle.net/aqszp8qa/4/

makeList = new List('makes', makeOptions); // solved the problem