Tengo resultados que aparecen dentro de una tabla, la diseñé para que se muestre como una cuadrícula separándolos por td para cada uno.
Usé un código JS para filtrar los resultados por un texto escrito en el cuadro de texto, ¡pero los únicos resultados que se muestran son las etiquetas! Quiero que cada td se muestre como resultado, completo con el contenido (Imagen + Entrada + etiqueta).
Aquí está el código JS y el ejemplo de una tabla igual a la que tengo:
$(document).ready(function() { $("#filter").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#table *").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); <table> <input type="text" id="filter"> <div name="table"> <td> <label>Product1</label> <img src='/img/a.jpg'> <input type="text" value="55"> </td> <td> <label>Product2</label> <img src='/img/b.jpg'> <input type="text" value="70"> </td> <td> <label>Product3</label> <img src='/img/c.jpg'> <input type="text" value="20"> </td> </div> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Use el enlace closest para obtener td principal de su búsqueda y luego toggle la visibilidad.
a continuación es la lógica de su solución.
$(this).closest("td").toggle($(this).text().toLowerCase().indexOf(value) > -1)
$(document).ready(function() { $("#filter").on("keyup", function() { var value = $(this).val().toLowerCase(); $("table label").filter(function() { $(this).closest("td").toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <input type="text" id="filter"> <div name="table"> <td> <label>Product1</label> <img src='/img/a.jpg'> <input type="text" value="55"> </td> <td> <label>Product2</label> <img src='/img/b.jpg'> <input type="text" value="70"> </td> <td> <label>Product3</label> <img src='/img/c.jpg'> <input type="text" value="20"> </td> </div> </table>