Как выполнить поиск в реальном времени и фильтр в таблице HTML

Ответ 1

Я создал эти примеры.

Простой поиск indexOf

var $rows = $('#table tr');
$('#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();
});

Демо: http://jsfiddle.net/7BUmG/2/

Поиск регулярных выражений

Более расширенная функциональность с использованием регулярных выражений позволит вам искать слова в любом порядке в строке. Он будет работать так же, если вы наберете apple green или green apple:

var $rows = $('#table tr');
$('#search').keyup(function() {

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',
        reg = RegExp(val, 'i'),
        text;

    $rows.show().filter(function() {
        text = $(this).text().replace(/\s+/g, ' ');
        return !reg.test(text);
    }).hide();
});

Демо: http://jsfiddle.net/dfsq/7BUmG/1133/

Debounce

Когда вы выполняете фильтрацию таблиц с помощью поиска по нескольким строкам и столбцам, очень важно учитывать производительность и скорость поиска/оптимизацию. Просто говоря, вы не должны запускать функцию поиска при каждом нажатии клавиши, это не обязательно. Чтобы предотвратить фильтрацию слишком часто, вы должны ее отбросить. Над примером кода будет:

$('#search').keyup(debounce(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    // etc...
}, 300));

Вы можете выбрать любую реализацию debounce, например, из Lodash _.debounce, или вы можете использовать что-то очень простое, как я использую в следующих демонстрационных версиях (debounce from here): http://jsfiddle.net/7BUmG/6230/ и http://jsfiddle.net/7BUmG/6231/.

Ответ 2

У меня есть jquery-плагин для этого. Он также использует jquery-ui. Здесь вы можете увидеть пример http://jsfiddle.net/tugrulorhan/fd8KB/1/

$("#searchContainer").gridSearch({
            primaryAction: "search",
            scrollDuration: 0,
            searchBarAtBottom: false,
            customScrollHeight: -35,
            visible: {
                before: true,
                next: true,
                filter: true,
                unfilter: true
            },
            textVisible: {
                before: true,
                next: true,
                filter: true,
                unfilter: true
            },
            minCount: 2
        });

Ответ 3

Вот лучшее решение для поиска внутри таблицы HTML, прикрывая всю таблицу, (все td, tr в таблице), чистый javascript и как короткое:

<input id='myInput' onkeyup='searchTable()' type='text'>

<table id='myTable'>
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

<script>
function searchTable() {
    var input, filter, found, table, tr, td, i, j;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td");
        for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                found = true;
            }
        }
        if (found) {
            tr[i].style.display = "";
            found = false;
        } else {
            tr[i].style.display = "none";
        }
    }
}
</script>

Ответ 4

Спасибо @dfsq за очень полезный код!

Я внес некоторые коррективы, и, возможно, некоторым их тоже нравятся. Я гарантировал, что вы можете искать несколько слов без строгого соответствия.

Примеры строк:

• Яблоки и груши
• Яблоки и бананы
• Яблоки и апельсины
• ...

Вы можете найти "ap pe", и он распознал бы первую строку
Вы могли бы искать "банановое яблоко", и он распознал бы вторую строку

Demo: http://jsfiddle.net/JeroenSormani/xhpkfwgd/1/

var $rows = $('#table tr');
$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase().split(' ');

  $rows.hide().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    var matchesSearch = true;
    $(val).each(function(index, value) {
      matchesSearch = (!matchesSearch) ? false : ~text.indexOf(value);
    });
    return matchesSearch;
  }).show();
});

Ответ 5

Я нашел, что dfsq отвечает на его комментарии чрезвычайно полезными. Я применил некоторые незначительные изменения (и я размещаю их здесь, если это может быть полезно для других).

• Используя class как перехватчики, вместо элементов таблицы tr
• Поиск/сравнение текста в дочернем элементе class при отображении/скрытии родителя
• Сделать его более эффективным, сохраняя текстовые элементы $rows в массиве только один раз (и избегая вычисления $rows.length)

var $rows = $('.wrapper');
var rowsTextArray = [];

var i = 0;
$.each($rows, function() {
  rowsTextArray[i] = $(this).find('.fruit').text().replace(/\s+/g, ' ').toLowerCase();
  i++;
});

$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
  $rows.show().filter(function(index) {
    return (rowsTextArray[index].indexOf(val) === -1);
  }).hide();
});

span {
  margin-right: 0.2em;
}

<input type="text" id="search" placeholder="type to search" />

<div class="wrapper"><span class="number">one</span><span class="fruit">apple</span></div>
<div class="wrapper"><span class="number">two</span><span class="fruit">banana</span></div>
<div class="wrapper"><span class="number">three</span><span class="fruit">cherry</span></div>
<div class="wrapper"><span class="number">four</span><span class="fruit">date</span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ответ 6

Datatable JS-плагин также является одним из хороших альтернатив для размещения функции поиска для таблицы html

var table = $('#example').DataTable();

// #myInput is a <input type="text"> element
$('#myInput').on( 'keyup', function () {
    table.search( this.value ).draw();
} );

https://datatables.net/examples/basic_init/zero_configuration.html

Ответ 7

Чисто Javascript Решение:

Работает для ВСЕХ столбцов и нечувствительных к регистру:

function search_table(){
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = document.getElementById("search_field_input");
  filter = input.value.toUpperCase();
  table = document.getElementById("table_id");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td") ; 
    for(j=0 ; j<td.length ; j++)
    {
      let tdata = td[j] ;
      if (tdata) {
        if (tdata.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break ; 
        } else {
          tr[i].style.display = "none";
        }
      } 
    }
  }
}

Ответ 8

вы можете использовать собственный javascript, как это

<script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>