wake-up-neo.com

So führen Sie eine Echtzeitsuche und einen Filter für eine HTML-Tabelle durch

Ich habe schon lange gegoogelt und nach Stack Overflow gesucht, aber ich kann dieses Problem einfach nicht umgehen.

Ich habe eine Standard-HTML-Tabelle, die beispielsweise Obst enthält. So wie:

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

Darüber habe ich ein Textfeld, in dem ich die Tabelle als Benutzertyp durchsuchen möchte. Wenn sie beispielsweise Gre eingeben, verschwindet die orangefarbene Zeile der Tabelle, wodurch Apple und Trauben übrig bleiben. Wenn sie Green Gr weiterführten und tippten, sollte die Apple-Reihe verschwinden und nur noch Trauben übrig bleiben. Ich hoffe das ist klar.

Sollte der Benutzer einige oder alle seiner Abfragen aus dem Textfeld löschen, möchte ich, dass alle Zeilen, die jetzt mit der Abfrage übereinstimmen, erneut angezeigt werden.

Während ich weiß, wie man eine Tabellenzeile in jQuery entfernt, habe ich wenig Ahnung, wie man die Suche ausführt und selektiv Zeilen daraus entfernt. Gibt es eine einfache Lösung dafür? Oder ein Plugin?

Wenn mich jemand in die richtige Richtung weisen könnte, wäre das brillant.

Vielen Dank.

121
samiles

Ich habe diese Beispiele erstellt.

Einfache indexOf Suche

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

Demo: http://jsfiddle.net/7BUmG/2/

Suche nach regulären Ausdrücken

Durch erweiterte Funktionen mit regulären Ausdrücken können Sie Wörter in beliebiger Reihenfolge in der Zeile suchen. Es funktioniert genauso, wenn Sie Apple green oder green Apple eingeben:

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

Demo: http://jsfiddle.net/dfsq/7BUmG/1133/

Debounce

Wenn Sie die Tabellenfilterung mit Suche über mehrere Zeilen und Spalten implementieren, ist es sehr wichtig, dass Sie die Leistung und die Suchgeschwindigkeit optimierung berücksichtigen. Einfach gesagt, Sie sollten die Suchfunktion nicht für jeden einzelnen Tastendruck ausführen, es ist nicht notwendig. Um zu verhindern, dass die Filter zu häufig ausgeführt werden, sollten Sie sie entprellen. Das obige Codebeispiel wird zu:

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

Sie können jede Debounce-Implementierung auswählen, zum Beispiel aus Lodash/- _.debounce , oder Sie können etwas sehr einfaches verwenden, wie ich es in den nächsten Demos (Debounce von hier ) verwende: http: // jsfiddle. net/7BUmG/6230/ und http://jsfiddle.net/7BUmG/6231/ .

282
dfsq

ich habe dafür ein Jquery-Plugin. Es verwendet auch jquery-ui. Ein Beispiel finden Sie hier 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
        });
10
Yorgo

Hier ist die beste Lösung für die Suche in HTML-Tabellen, während die gesamte Tabelle , (alle td , tr in der Tabelle), reines Javascript und als kurz wie möglich:

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

Vielen Dank @dfsq für den sehr hilfreichen Code!

Ich habe einige Anpassungen vorgenommen und vielleicht auch andere. Ich habe sichergestellt, dass Sie nach mehreren Wörtern suchen können, ohne eine strikte Übereinstimmung zu haben.

Beispielzeilen:

  • Äpfel und Birnen
  • Äpfel und Bananen
  • Äpfel und Orangen
  • ...

Sie könnten nach 'ap pe' suchen und die erste Zeile würde erkannt
Sie könnten nach "Banane Apple" suchen und die zweite Reihe würde erkannt

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

Ich fand die Antwort von dfsq äußerst hilfreich. Ich habe einige geringfügige Änderungen vorgenommen, die für mich zutreffend sind (und ich poste es hier, falls es für andere von Nutzen ist).

  1. Verwenden von class als Hooks anstelle von Tabellenelementen tr
  2. Suchen/Vergleichen von Text innerhalb eines untergeordneten Objekts class beim Anzeigen/Ausblenden des übergeordneten Elements
  3. Erhöhen Sie die Effizienz, indem Sie die $rows-Textelemente nur einmal in einem Array speichern (und $rows.length-Zeiten vermeiden).

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>

2
Kaya Toast

sie können native Javascript wie folgt verwenden 

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

0
Omar Maher

Datatable JS plugin ist auch eine gute Alternative, um die Suchfunktion für die HTML-Tabelle zu unterstützen

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

0
Aditya

Reine Javascript-Lösung:

Funktioniert für ALLE Spalten und GroßKleinschreibung: - /

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";
        }
      } 
    }
  }
}
0
Natesh bhat