name jquery val()
Búsqueda en vivo a través de filas de la tabla (12)
Aquí está la versión pura de Javascript con la búsqueda EN DIRECTO de TODAS LAS COLUMNAS :
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";
}
}
}
}
}
Quiero hacer una búsqueda en vivo a través de las filas de la tabla, usando jQuery, la palabra "en vivo" es la clave, porque quiero escribir las palabras clave en la entrada de texto, en el mismo sitio y me gustaría que jQuery clasifique automáticamente ( o eliminar aquellos que no coinciden con la consulta de búsqueda) las filas de la tabla.
Aquí está mi 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>
Y si lo quisiera. buscar por la Unique ID , debe mostrar las únicas filas que comienzan desde el número determinado para la identificación única. Fe. si escribiera ''2'' en el cuadro de entrada de búsqueda, las siguientes filas deberían permanecer, ya que comienzan con 2 :
<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>
Si escribiera 24 , entonces debería haber solo una fila visible, ya que comienza desde el 24 :
<table>
<tr><th>Unique ID</th><th>Random ID</th></tr>
<tr><td>24111</td><td>54364</td></tr>
</table>
Si pudieran darme algunos consejos sobre cómo hacer algo como esto, lo apreciaría muchísimo.
Gracias.
Aquí hay algo que puedes hacer con Ajax, PHP y JQuery. Espero que esto te ayude o te dé un comienzo. Verifica la consulta de mysql en php. Coincide con el patrón comenzando desde el principio.
Vea la demostración en vivo y el código fuente aquí.
http://purpledesign.in/blog/to-create-a-live-search-like-google/
Cree un cuadro de búsqueda, puede ser un campo de entrada como este.
<input type="text" id="search" autocomplete="off">
Ahora necesitamos escuchar lo que escriba el usuario en el área de texto. Para esto, usaremos jquery live () y el evento keyup. En cada keyup tenemos una función de búsqueda "búsqueda" que ejecutará un script php.
Supongamos que tenemos el html así. Tenemos un campo de entrada y una lista para mostrar los resultados.
<div class="icon"></div>
<input type="text" id="search" autocomplete="off">
<ul id="results"></ul>
Tenemos un script de Jquery que escuchará el evento keyup en el campo de entrada y, si no está vacío, invocará la función search (). La función search () ejecutará el script php y mostrará el resultado en la misma página usando AJAX.
Aquí está el 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;
}
}); En php, dispara una consulta a la base de datos mysql. El php devolverá los resultados que se pondrán en el html usando AJAX. Aquí el resultado se coloca en una lista html.
Supongamos que hay una base de datos ficticia que contiene dos tablas animales y aves con dos nombres de columnas similares ''tipo'' y ''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 .= ''<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);
}
}
Aquí hay una versión que busca ambas columnas.
$("#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;
});
});
});
Así es cómo vivo en una tabla html:
<input type = ''text'' onkeyup = "filterTo (this.value, ''myTable'')" placeholder = ''Search ...''>
<table id = ''myTable''> ... </ table>
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<td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(input.toUpperCase()) > -1) { hide=false; break }
}
tr[i].style.display = hide ? ''none'' : '''';
} }
Debajo de la función JS que puede usar para filtrar la fila en función de algunas columnas especificadas, consulte searchColumn array. Se toma de la escuela w3 y se personaliza un poco para buscar y filtrar en la lista de columnas dada.
Estructura de HTML
<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";
}
}
}
No estoy seguro de qué tan eficiente es esto, pero esto funciona:
$("#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 - Búsqueda en vivo en la tabla
Agregué una lógica de resaltado simplista que usted o futuros usuarios pueden encontrar útil.
Una de las formas de agregar algunos resaltados básicos es envolviendo las etiquetas em en el texto coincidente y usando CSS se aplica un fondo amarillo al texto coincidente, es decir: ( em{ background-color: yellow } ), similar a esto:
// 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 : aplicar algunos resaltados simples
Si alguna celda en una fila contiene la frase o palabra buscada, esta función muestra esa fila, de lo contrario, la oculta.
<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();
}
}
});
});
Tomé la respuesta de yckart y:
- espaciado para la legibilidad
- búsqueda insensible a mayúsculas
- hubo un error en la comparación que se solucionó al agregar .trim ()
(Si coloca las secuencias de comandos en la parte inferior de la página debajo de jQuery, incluya que no necesita el documento listo)
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>
Si desea extender esto, haga que itere sobre cada ''td'' y haga esta comparación.
Una vieja pregunta, pero descubro cómo hacerlo más rápido. Para mi ejemplo: tengo aproximadamente 10k de datos en mi tabla, así que necesito una máquina de búsqueda rápida.
Aquí esta lo que hice:
$(''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";
}
}
}
})
Espero que ayude a alguien.
Utilicé las respuestas anteriores y las combiné para crear:
Buscar cualquier columna por ocultar filas y resaltar
Css para resaltar textos encontrados:
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 here
Utilizando la respuesta de yckart , logré buscar toda la tabla, todas las 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);
});
});
François Wahl se acerca , pero un poco más 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);
});
});