Cách thực hiện tìm kiếm và lọc theo thời gian thực trên bảng HTML

Tôi đã Googling và tìm kiếm Stack Overflow một thời gian, nhưng tôi không thể khắc phục được vấn đề này.

Tôi có một bảng HTML tiêu chuẩn, chứa, nói, trái cây. Thích như vậy:

<table>
   <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>

Ở trên này tôi có một hộp văn bản, mà tôi muốn tìm kiếm bảng dưới dạng người dùng. Vì vậy, nếu họ gõ Grechẳng hạn, hàng màu cam của bảng sẽ biến mất, để lại Apple và Nho. Nếu họ tiếp tục và gõ Green Grhàng Apple sẽ biến mất, chỉ để lại nho. Tôi hy vọng điều này là rõ ràng.

Và, nếu người dùng xóa một số hoặc tất cả truy vấn của họ khỏi hộp văn bản, tôi nên thích tất cả các hàng khớp với truy vấn để xuất hiện lại.

Trong khi tôi biết cách loại bỏ một hàng trong jQuery, tôi có ít ý tưởng về cách thực hiện tìm kiếm và loại bỏ các hàng một cách có chọn lọc dựa trên điều này. Có một giải pháp đơn giản cho việc này? Hay một plugin?

Nếu bất cứ ai có thể chỉ cho tôi đi đúng hướng, nó sẽ rất tuyệt vời.

Cảm ơn bạn.

Tôi đã tạo ra những ví dụ này.

Tìm kiếm indexOf đơn giản

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();
});

Bản trình diễn : http://jsfiddle.net/7BUmG/2/

Tìm kiếm biểu thức chính quy

Chức năng nâng cao hơn bằng cách sử dụng các biểu thức thông thường sẽ cho phép bạn tìm kiếm các từ theo bất kỳ thứ tự nào trong hàng. Nó sẽ hoạt động tương tự nếu bạn gõ apple greenhoặc 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();
});

Bản trình diễn : http://jsfiddle.net/dfsq/7BUmG/1133/

Ra mắt

Khi bạn thực hiện lọc bảng với tìm kiếm trên nhiều hàng và cột, điều rất quan trọng là bạn phải xem xét hiệu suất và tốc độ tìm kiếm / tối ưu hóa. Nói đơn giản là bạn không nên chạy chức năng tìm kiếm trên mỗi lần nhấn phím, điều đó là không cần thiết. Để ngăn quá trình lọc chạy quá thường xuyên, bạn nên gỡ bỏ nó. Ví dụ mã trên sẽ trở thành:

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

Bạn có thể chọn bất kỳ triển khai gỡ lỗi nào , ví dụ như từ Lodash _.debounce hoặc bạn có thể sử dụng một cái gì đó rất đơn giản như tôi sử dụng trong các bản demo tiếp theo (gỡ lỗi từ đây ): http://jsfiddle.net/7BUmG/6230/ và http: / /jsfiddle.net/7BUmG/6231/ .

tôi có một plugin jquery cho việc này. Nó cũng sử dụng jquery-ui. Bạn có thể xem một ví dụ ở đây 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
        });

Đây là giải pháp tốt nhất để tìm kiếm bên trong bảng HTML trong khi bao trùm tất cả các bảng , (tất cả td, tr trong bảng), javascript thuần túy và càng ngắn càng tốt:

<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>

Cảm ơn bạn @dfsq vì mã rất hữu ích!

Tôi đã thực hiện một số điều chỉnh và có thể một số người khác cũng thích chúng. Tôi đảm bảo rằng bạn có thể tìm kiếm nhiều từ mà không cần phải khớp một cách nghiêm ngặt.

Hàng ví dụ:

• Táo và lê
• Táo và Chuối
• Táo và cam
• ...

Bạn có thể tìm kiếm 'ap pe' và nó sẽ nhận ra hàng đầu tiên
Bạn có thể tìm kiếm 'chuối táo' và nó sẽ nhận ra hàng thứ hai

Bản trình diễn: 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();
});

Tôi thấy câu trả lời của dfsq rất hữu ích. Tôi đã thực hiện một số sửa đổi nhỏ áp dụng cho tôi (và tôi sẽ đăng nó ở đây, trong trường hợp nó có ích cho người khác).

1. Sử dụng classnhư các hook, thay vì các phần tử bảngtr
2. Tìm kiếm / so sánh văn bản trong một đứa trẻ classtrong khi hiển thị / ẩn cha mẹ
3. Làm cho nó hiệu quả hơn bằng cách lưu trữ các $rowsthành phần văn bản vào một mảng chỉ một lần (và tránh $rows.lengthtính toán thời gian)

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>

Giải pháp Javascript thuần túy:

Hoạt động cho TẤT CẢ các cột và Không phân biệt chữ hoa chữ thường:

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";
        }
      } 
    }
  }
}

bạn có thể sử dụng javascript như thế này

<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>

Plugin khả năng truy cập cũng là một trong những tính năng thay thế tốt cho tính năng tìm kiếm cho bảng 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

Nếu bạn có thể tách html và dữ liệu, bạn có thể sử dụng các thư viện bên ngoài như datatables hoặc cái tôi đã tạo. https://github.com/thehitechpanky/js-bootstrap-tables

Thư viện này sử dụng chức năng keyup để tải lại tabledata và do đó nó dường như hoạt động như tìm kiếm.

function _addTableDataRows(paramObjectTDR) {
    let { filterNode, limitNode, bodyNode, countNode, paramObject } = paramObjectTDR;
    let { dataRows, functionArray } = paramObject;
    _clearNode(bodyNode);
    if (typeof dataRows === `string`) {
        bodyNode.insertAdjacentHTML(`beforeend`, dataRows);
    } else {
        let filterTerm;
        if (filterNode) {
            filterTerm = filterNode.value.toLowerCase();
        }
        let serialNumber = 0;
        let limitNumber = 0;
        let rowNode;
        dataRows.forEach(currentRow => {
            if (!filterNode || _filterData(filterTerm, currentRow)) {
                serialNumber++;
                if (!limitNode || limitNode.value === `all` || limitNode.value >= serialNumber) {
                    limitNumber++;
                    rowNode = _getNode(`tr`);
                    bodyNode.appendChild(rowNode);
                    _addData(rowNode, serialNumber, currentRow, `td`);
                }
            }
        });
        _clearNode(countNode);
        countNode.insertAdjacentText(`beforeend`, `Showing 1 to ${limitNumber} of ${serialNumber} entries`);
    }
    if (functionArray) {
        functionArray.forEach(currentObject => {
            let { className, eventName, functionName } = currentObject;
            _attachFunctionToClassNodes(className, eventName, functionName);
        });
    }
}