Ricerca in tempo reale attraverso le righe della tabella

Voglio fare una ricerca dal vivo attraverso le righe della tabella, usando jQuery, la parola “live” è la chiave, perché voglio digitare le parole chiave nell’input del testo, nello stesso sito e vorrei che jQuery ordinasse automaticamente ( o rimuovere quelli che non corrispondono alla query di ricerca) le righe della tabella.

Ecco il mio HTML:

Unique IDRandom ID
214215442
1252512556
21144666
3245466334
2411154364

E se volessi farlo ricerca per Unique ID , dovrebbe mostrare le sole righe che iniziano dal certo numero per l’ID univoco. Fe. se dovessi digitare “2” nella casella di inserimento della ricerca, le seguenti righe dovrebbero rimanere, poiché iniziano con 2 :

 
Unique IDRandom ID
214215442
21144666
2411154364

Se dovessi digitare 24 , allora dovrebbe esserci solo una riga visibile cominciando dal 24 :

 
Unique IDRandom ID
2411154364

Se voi poteste darmi qualche consiglio su come fare qualcosa di simile, lo apprezzerei molto.

    Grazie.

    Non sono sicuro di quanto sia efficiente, ma funziona così:

     $("#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 – Ricerca in tempo reale sul tavolo


    Ho aggiunto alcune semplicistiche logiche di evidenziazione che tu o i futuri utenti potrebbero trovare utili.

    Uno dei modi per aggiungere alcune evidenziazioni di base è quello di racchiudere i tag em attorno al testo abbinato e utilizzare i CSS per applicare uno sfondo giallo al testo corrispondente, ovvero: ( em{ background-color: yellow } ), simile a questo:

     // 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 = '' + textToHighlight + ''; 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 – applica alcune semplici evidenziazioni


    Ecco una versione che cerca entrambe le colonne.

     $("#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/

    François Wahl si avvicina , ma un po ‘più corto:

     $("#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/

    Ho preso la risposta di yckart e:

    • distanziato per la leggibilità
    • ricerca insensibile al maiuscolo / minuscolo
    • c’era un bug nel confronto che veniva corretto aggiungendo .trim ()

    (Se metti i tuoi script in fondo alla tua pagina sotto jQuery include non dovresti aver bisogno di documenti pronti)

    jQuery:

       

    Se vuoi estenderlo, fallo scorrere su ogni ‘td’ e fai questo confronto.

    Ecco la versione Javascript pura di esso con la ricerca LIVE per TUTTE LE COLONNE :

     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 -1) { tr[i].style.display = ""; break ; } else { tr[i].style.display = "none"; } } } } } 

    Usando la risposta di yckart , l’ho fatto per cercare l’intero tavolo – tutti i td.

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

    Se una qualsiasi cella di una riga contiene la frase o la parola cercate, questa funzione mostra che la riga lo nasconde altrimenti.

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

    Ho usato le risposte precedenti e le ho combinate per creare:

    Cerca qualsiasi colonna per hide le righe e l’evidenziazione

    Css per evidenziare i testi trovati:

     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 = '' + textToHighlight + ''; 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 qui

    Ecco qualcosa che puoi fare con Ajax, PHP e JQuery. Spero che questo ti aiuti o ti aiuti. Controlla la query mysql in php. Corrisponde al modello a partire dal primo.

    Vedi demo live e codice sorgente qui.

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

    Crea una casella di ricerca, potrebbe essere un campo di input come questo.

      

    Ora abbiamo bisogno di ascoltare qualsiasi cosa l’utente digiti nell’area di testo. Per questo useremo jquery live () e l’evento keyup. Ad ogni keyup abbiamo una funzione di ricerca jquery che eseguirà uno script php.

    Supponiamo di avere l’html come questo. Abbiamo un campo di input e un elenco per visualizzare i risultati.

      

      Abbiamo uno script Jquery che ascolterà l’evento keyup nel campo di input e se non è vuoto invocherà la funzione search (). La funzione search () eseguirà lo script php e visualizzerà il risultato sulla stessa pagina usando AJAX.

      Ecco il 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; } 

      }); Nel php, spara una query al database mysql. Il php restituirà i risultati che verranno inseriti nell’html usando AJAX. Qui il risultato è inserito in una lista html.

      Supponiamo che esista un database fittizio contenente due tabelle di animali e uccelli con due nomi di colonna simili “tipo” e “desc”.

       //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 .= '
    • '; $html .= ''; $html .= '

      nameString

      '; $html .= '

      functionString

      '; $html .= '
      '; $html .= '
    • '; $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", "".$search_string."", $result['desc']); $display_name = preg_replace("/".$search_string."/i", "".$search_string."", $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('https://stackoverflow.com/questions/12433304/live-search-through-table-rows/urlString', $display_url, $output); // Output echo($output); } }else{ // Format No Results Output $output = str_replace('https://stackoverflow.com/questions/12433304/live-search-through-table-rows/urlString', 'javascript:void(0);', $html); $output = str_replace('nameString', 'No Results Found.', $output); $output = str_replace('functionString', 'Sorry :(', $output); // Output echo($output); } }

      Vecchia domanda ma scopro come farlo più velocemente. Per il mio esempio: ho circa 10k di dati nel mio tavolo, quindi ho bisogno di qualche macchina di ricerca veloce.

      Ecco cosa ho fatto:

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

      Spero che aiuti qualcuno.

      Sotto la funzione JS puoi usare per filtrare la riga in base ad alcune colonne specifiche vedi searchColumn array. È preso da w3 school e un po ‘personalizzato per cercare e filtrare sull’elenco di colonne specificato.

      Struttura HTML

        
      COL 1 CoL 2 COL 3 COL 4 COL 5 COL 6

        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 -1 ) { found=true; } } } if(found==true) { tr[i].style.display = ""; } else{ tr[i].style.display = "none"; } } } 

      Ecco come vivo cerca una tabella html:

       function filterTo(input, table) { var tr = document.getElementById(table).getElementsByTagName('tr'); for (var i = 1; i < tr.length; i++) { var td = tr[i].getElementsByTagName('td'); var hide = true; for (var j=0; j -1) { hide=false; break } } tr[i].style.display = hide ? 'none' : ''; } }