Comment effectuer une recherche et un filtre en temps réel sur un tableau HTML

Question

J'ai cherché sur Google et la recherche de Dépassement de la Pile pendant un certain temps, mais je ne peux pas me résoudre ce problème.

J'ai une table HTML, contenant, disons, des fruits. Comme suit:

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

Au-dessus de cela, j'ai une zone de texte, que je tiens à la recherche de la table en tant que types d'utilisateurs. Donc, si ils tapent Gre par exemple, l'Orange ligne de la table de disparaître, laissant la Pomme et les Raisins. Si elles ont porté sur et tapé Green Gr Apple ligne doit disparaître, en laissant un peu de raisins. J'espère que c'est clair.

Et, si l'utilisateur de supprimer tout ou partie de leur requête à partir de la zone de texte, je voudrais que toutes les lignes qui correspondent désormais à la requête de réapparaître.

Même si je sais comment faire pour supprimer une ligne d'un tableau en jQuery, j'ai une petite idée sur la façon de faire de la recherche et la suppression de lignes de façon sélective en fonction sur ce. Est-il une solution simple pour cela? Ou un plugin?

Si quelqu'un pouvait me diriger dans la bonne voie, ce serait génial.

Je vous remercie.

Answer 1

J'ai créé ces exemples.

Simple indexOf recherche

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

Démo: http://jsfiddle.net/7BUmG/2/

La recherche d'expressions régulières

Des fonctionnalités plus avancées à l'aide d'expressions régulières vous permettra de rechercher des mots dans un ordre quelconque dans la ligne. Il fonctionnera de la même si vous tapez apple green ou 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();
});

Démo: http://jsfiddle.net/dfsq/7BUmG/1133/

Answer 2

J'ai un plugin JQuery pour cela. Il utilise aussi jquery-ui. Vous pouvez voir un exemple ici 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
        });