Фильтр поиска в древовидной таблице jQuery

Я хочу реализовать поисковый фильтр в моей древовидной таблице. Я использую древовидную библиотеку JQuery, и это то, что я сделал до сих пор, но, похоже, она не работает. У кого-нибудь есть идеи, почему?

Это мой HTML:

<table id="example">
  <tbody>
    <thead>
      <tr>
        <th>Tree data</th>
      </tr>
      <input class="search" placeholder="Search" />
      <p class="log"></p>
    </thead>
</tbody>

И это функция, которую я реализовал для фильтра поиска:

var $rows = $('#example tr').treetable({expandable: true});
$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

  $rows.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(val);
  }).hide();
});

1 ответ

Во -первых, это должно быть $('.search').keyup ... вместо $('#search').keyup...,

во-вторых, я думаю, что лучший способ это:

var $rows = $('#tree_table tbody tr').treetable({expandable: true});
$('.search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

Таким образом, голова всегда остается.

Другие вопросы по тегам