wake-up-neo.net

Live-Suche durch Tabellenzeilen

Ich möchte eine Live-Suche durch die Tabellenzeilen mit jQuery durchführen. Das Wort "live" ist der Schlüssel, da ich die Schlüsselwörter in die Texteingabe auf derselben Website eingeben möchte und ich möchte, dass jQuery automatisch sortiert wird ( oder entfernen Sie diejenigen, die der Suchabfrage nicht entsprechen) die Tabellenzeilen.

Hier ist mein HTML:

<table>
    <tr><th>Unique ID</th><th>Random ID</th></tr>
    <tr><td>214215</td><td>442</td></tr>
    <tr><td>1252512</td><td>556</td></tr>
    <tr><td>2114</td><td>4666</td></tr>
    <tr><td>3245466</td><td>334</td></tr>
    <tr><td>24111</td><td>54364</td></tr>
</table>

Und wenn ich z. Bei der Suche nach Unique ID sollten nur die Zeilen angezeigt werden, die mit der bestimmten Nummer für die eindeutige ID beginnen. Fe. Wenn ich im Sucheingabefeld '2' eingeben würde, sollten die folgenden Zeilen beibehalten werden, da sie mit 2 beginnen:

<table>
    <tr><th>Unique ID</th><th>Random ID</th></tr>
    <tr><td>214215</td><td>442</td></tr>
    <tr><td>2114</td><td>4666</td></tr>
    <tr><td>24111</td><td>54364</td></tr>
</table>

Wenn ich 24 eingeben würde, sollte nur eine Zeile sichtbar sein, da sie vom 24 beginnt:

<table>
    <tr><th>Unique ID</th><th>Random ID</th></tr>
    <tr><td>24111</td><td>54364</td></tr>
</table>

Wenn Sie mir ein paar Tipps geben könnten, wie man so etwas macht, würde ich das sehr schätzen.

Vielen Dank.

25
Sapp

Ich bin mir nicht sicher, wie effizient das ist, aber das funktioniert:

$("#search").on("keyup", function() {
    var value = $(this).val();

    $("table tr").each(function(index) {
        if (index != 0) {

            $row = $(this);

            var id = $row.find("td:first").text();

            if (id.indexOf(value) != 0) {
                $(this).hide();
            }
            else {
                $(this).show();
            }
        }
    });
});​

DEMO - Livesuche auf dem Tisch


Ich habe eine vereinfachte Hervorhebungslogik hinzugefügt, die für Sie oder zukünftige Benutzer hilfreich sein könnte.

Eine der Möglichkeiten, einige grundlegende Hervorhebungen hinzuzufügen, besteht darin, em -Tags um den übereinstimmenden Text zu wickeln und dem übereinstimmenden Text mit CSS einen gelben Hintergrund zuzuweisen, z. B .: (em{ background-color: yellow }).

// removes highlighting by replacing each em tag within the specified elements with it's content
function removeHighlighting(highlightedElements){
    highlightedElements.each(function(){
        var element = $(this);
        element.replaceWith(element.html());
    })
}

// add highlighting by wrapping the matched text into an em tag, replacing the current elements, html value with it
function addHighlighting(element, textToHighlight){
    var text = element.text();
    var highlightedText = '<em>' + textToHighlight + '</em>';
    var newText = text.replace(textToHighlight, highlightedText);

    element.html(newText);
}

$("#search").on("keyup", function() {
    var value = $(this).val();

    // remove all highlighted text passing all em tags
    removeHighlighting($("table tr em"));

    $("table tr").each(function(index) {
        if (index !== 0) {
            $row = $(this);

            var $tdElement = $row.find("td:first");
            var id = $tdElement.text();
            var matchedIndex = id.indexOf(value);

            if (matchedIndex != 0) {
                $row.hide();
            }
            else {
                //highlight matching text, passing element and matched text
                addHighlighting($tdElement, value);
                $row.show();
            }
        }
    });
});

Demo - Anwenden einiger einfacher Hervorhebungen


59
Nope

Hier ist eine Version, die beide Spalten durchsucht.

$("#search").keyup(function () {
    var value = this.value.toLowerCase().trim();

    $("table tr").each(function (index) {
        if (!index) return;
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
});

demo: http://jsfiddle.net/rFGWZ/369/

24
rewon

François Wahl Ansatz , aber etwas kürzer:

$("#search").keyup(function() {
    var value = this.value;

    $("table").find("tr").each(function(index) {
        if (!index) return;
        var id = $(this).find("td").first().text();
        $(this).toggle(id.indexOf(value) !== -1);
    });
});

http://jsfiddle.net/ARTsinn/CgFd9/

15
yckart

Ich nahm Yckarts Antwort und:

  • zur besseren Lesbarkeit aus Platzgründen
  • suche nach Groß- und Kleinschreibung
  • es gab einen Fehler im Vergleich, der durch Hinzufügen von .trim () behoben wurde.

(Wenn Sie Ihre Skripts am Ende Ihrer Seite unterhalb des jQuery-Include ablegen, sollten Sie kein Dokument benötigen.)

jQuery:

 <script>
    $(".card-table-search").keyup(function() {
        var value = this.value.toLowerCase().trim();

        $(".card-table").find("tr").each(function(index) {
            var id = $(this).find("td").first().text().toLowerCase().trim();
            $(this).toggle(id.indexOf(value) !== -1);
        });
    });
 </script>

Wenn Sie dies erweitern möchten, iterieren Sie es über jedes 'td' und führen Sie diesen Vergleich durch.

4

Hier ist die reine Javascript-Version davon mit LIVE-Suche nach ALLEN SPALTEN :

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

Alte Frage, aber ich finde heraus, wie es schneller geht. Für mein Beispiel: Ich habe ungefähr 10.000 Daten in meiner Tabelle, also brauche ich eine schnelle Suchmaschine.

Folgendes habe ich gemacht:

$('input[name="search"]').on('keyup', function() {

        var input, filter, tr, td, i;

        input  = $(this);
        filter = input.val().toUpperCase();
        tr     = $("table tr");

        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0]; // <-- change number if you want other column to search
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    })

Ich hoffe es hilft jemandem.

2
Kafus

Mit yckarts Antwort habe ich es geschafft, nach der ganzen Tabelle zu suchen - allen TDs.

$("#search").keyup(function() {
    var value = this.value;

    $("table").find("tr").each(function(index) {
        if (index === 0) return;

        var if_td_has = false; //boolean value to track if td had the entered key
        $(this).find('td').each(function () {
            if_td_has = if_td_has || $(this).text().indexOf(value) !== -1; //Check if td's text matches key and then use OR to check it for all td's
        });

        $(this).toggle(if_td_has);

    });
});
1
Elnoor

Ich habe die vorherigen Antworten verwendet und kombiniert, um Folgendes zu erstellen:

Durchsuchen Sie alle Spalten, indem Sie Zeilen ausblenden und hervorheben

Css für hervorgehobene Texte:

em {
   background-color: yellow
}

Js:

function removeHighlighting(highlightedElements) {
   highlightedElements.each(function() {
      var element = $(this);
      element.replaceWith(element.html());
   })
}

function addHighlighting(element, textToHighlight) {
   var text = element.text();
   var highlightedText = '<em>' + textToHighlight + '</em>';
   var newText = text.replace(textToHighlight, highlightedText);

   element.html(newText);
}

$("#search").keyup(function() {
   var value = this.value.toLowerCase().trim();

   removeHighlighting($("table tr em"));

   $("table tr").each(function(index) {
      if (!index) return;
      $(this).find("td").each(function() {
         var id = $(this).text().toLowerCase().trim();
         var matchedIndex = id.indexOf(value);
         if (matchedIndex === 0) {
            addHighlighting($(this), value);
         }
         var not_found = (matchedIndex == -1);
         $(this).closest('tr').toggle(!not_found);
         return not_found;
      });
   });
});

Demo hier

1
Behzad

Wenn eine Zelle in einer Zeile die gesuchte Phrase oder das gesuchte Wort enthält, zeigt diese Funktion, dass die Zeile sie sonst verbirgt. 

    <input type="text" class="search-table"/>  
     $(document).on("keyup",".search-table", function () {
                var value = $(this).val();
                $("table tr").each(function (index) {
                    $row = $(this);
                    $row.show();
                    if (index !== 0 && value) {
                        var found = false;
                        $row.find("td").each(function () {
                            var cell = $(this).text();
                            if (cell.indexOf(value.toLowerCase()) >= 0) {
                                found = true;
                                return;
                            } 
                        });
                        if (found === true) {
                            $row.show();
                        }
                        else {
                            $row.hide();
                        }
                    }
          });
   });
1
user890255

Unter der JS-Funktion können Sie die Zeile basierend auf einigen angegebenen Spalten filtern (siehe searchColumn-Array). Es wird von der w3-Schule übernommen und ein wenig angepasst, um nach der angegebenen Spaltenliste zu suchen und zu filtern.

HTML-Struktur

<input style="float: right" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search" title="Type in a name">

     <table id ="myTable">
       <thead class="head">
        <tr>
        <th>COL 1</th>
        <th>CoL 2</th>
        <th>COL 3</th>
        <th>COL 4</th>
        <th>COL 5</th>
        <th>COL 6</th>      
        </tr>
    </thead>    
  <tbody>

    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
     </tr>

    </tbody>
</tbody>

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

     var searchColumn=[0,1,3,4]

    for (i = 0; i < tr.length; i++) {

      if($(tr[i]).parent().attr('class')=='head')
        {
            continue;
         }

    var found = false;
      for(var k=0;k<searchColumn.length;k++){

        td = tr[i].getElementsByTagName("td")[searchColumn[k]];

        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1 ) {
            found=true;    
          } 
        }
    }
    if(found==true)  {
        tr[i].style.display = "";
    } 
    else{
        tr[i].style.display = "none";
    }
}
}
0
Syed Shibli
$("#search").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("tbody tr").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });

Annahme, es gibt einen Tisch mit einem Körper. Sie können auch mit find suchen oder wenn die Tabelle eine ID hat, können Sie die ID verwenden

0

Dieser ist in meinem Fall der Beste

https://www.w3schools.com/jquery/jquery_filters.asp

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
0
Ajay

Mit Ajax, PHP und JQuery können Sie Folgendes tun. Hoffe das hilft oder gibt dir einen Anfang. Überprüfen Sie die MySQL-Abfrage in PHP. Sie stimmt mit dem Muster ab, das zuerst beginnt.

Sehen Sie sich hier die Live-Demo und den Quellcode an.

http://purpledesign.in/blog/to-create-a-live-search-like-google/

Erstellen Sie ein Suchfeld, möglicherweise ein solches Eingabefeld.

<input type="text" id="search" autocomplete="off">

Jetzt müssen wir uns anhören, was der Benutzer im Textbereich eingibt. Dazu verwenden wir die jquery live () und das keyup-Event. Bei jedem Keyup haben wir eine Jquery-Funktion "search", mit der ein PHP-Skript ausgeführt wird.

Angenommen, wir haben die HTML so. Wir haben ein Eingabefeld und eine Liste, um die Ergebnisse anzuzeigen.

 <div class="icon"></div>
 <input type="text" id="search" autocomplete="off">
 <ul id="results"></ul>

Wir haben ein Jquery-Skript, das das Keyup-Ereignis im Eingabefeld abhört. Wenn es nicht leer ist, wird die Funktion search () aufgerufen. Die Funktion search () führt das PHP-Skript aus und zeigt das Ergebnis auf derselben Seite mit AJAX an.

Hier ist die JQuery.

$(document).ready(function() {  

    // Icon Click Focus
    $('div.icon').click(function(){
        $('input#search').focus();
    });

    //Listen for the event
    $("input#search").live("keyup", function(e) {
    // Set Timeout
    clearTimeout($.data(this, 'timer'));

    // Set Search String
    var search_string = $(this).val();

    // Do Search
    if (search_string == '') {
        $("ul#results").fadeOut();
        $('h4#results-text').fadeOut();
    }else{
        $("ul#results").fadeIn();
        $('h4#results-text').fadeIn();
        $(this).data('timer', setTimeout(search, 100));
    };
});


// Live Search
// On Search Submit and Get Results
function search() {
    var query_value = $('input#search').val();
    $('b#search-string').html(query_value);
    if(query_value !== ''){
        $.ajax({
            type: "POST",
            url: "search_st.php",
            data: { query: query_value },
            cache: false,
            success: function(html){
                $("ul#results").html(html);

            }
        });
    }return false;    
}

}); Schießen Sie in der PHP-Datenbank eine Abfrage an die MySQL-Datenbank. Das PHP gibt die Ergebnisse zurück, die mit AJAX in die HTML-Datei geschrieben werden. Hier wird das Ergebnis in eine HTML-Liste gestellt.

Angenommen, es gibt eine Dummy-Datenbank, die zwei Tabellen "animals" und "bird" mit zwei ähnlichen Spaltennamen "type" und "desc" enthält.

//search.php
// Credentials
$dbhost = "localhost";
$dbname = "live";
$dbuser = "root";
$dbpass = "";

//  Connection
global $tutorial_db;

$tutorial_db = new mysqli();
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname);
$tutorial_db->set_charset("utf8");

//  Check Connection
if ($tutorial_db->connect_errno) {
    printf("Connect failed: %s\n", $tutorial_db->connect_error);
    exit();

$html = '';
$html .= '<li class="result">';
$html .= '<a target="_blank" href="urlString">';
$html .= '<h3>nameString</h3>';
$html .= '<h4>functionString</h4>';
$html .= '</a>';
$html .= '</li>';

$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
$search_string = $tutorial_db->real_escape_string($search_string);

// Check Length More Than One Character
if (strlen($search_string) >= 1 && $search_string !== ' ') {
    // Build Query
    $query = "SELECT *
        FROM animals
        WHERE type REGEXP '^".$search_string."'
        UNION ALL SELECT *
        FROM birf
        WHERE type REGEXP '^".$search_string."'"
        ;

$result = $tutorial_db->query($query);
    while($results = $result->fetch_array()) {
        $result_array[] = $results;
    }

    // Check If We Have Results
    if (isset($result_array)) {
        foreach ($result_array as $result) {

            // Format Output Strings And Hightlight Matches
            $display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['desc']);
            $display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['type']);
        $display_url = 'https://www.google.com/search?q='.urlencode($result['type']).'&ie=utf-8&oe=utf-8';

            // Insert Name
            $output = str_replace('nameString', $display_name, $html);

            // Insert Description
            $output = str_replace('functionString', $display_function, $output);

            // Insert URL
            $output = str_replace('urlString', $display_url, $output);



            // Output
            echo($output);
        }
    }else{

        // Format No Results Output
        $output = str_replace('urlString', 'javascript:void(0);', $html);
        $output = str_replace('nameString', '<b>No Results Found.</b>', $output);
        $output = str_replace('functionString', 'Sorry :(', $output);

        // Output
        echo($output);
    }
}
0
Raj Sharma