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> 

자바 스크립트

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