Hola, me preguntaba si alguien podría ayudar, estoy tratando de hacer que cuando busque en un cuadro de búsqueda, si un div contiene una palabra que ingresó en el cuadro, se mostrará y, si no, se ocultará. Esto es lo que tengo hasta ahora, pero ahora estoy atascado, he investigado pero solo tengo un conocimiento básico de Javascript y parece que no puedo avanzar más. ¡Gracias!
function myFunction() { // Declare variables var input, filter; input = document.getElementById('myInput'); filter = input.value.toLowerCase(); $('div').find('div').each(function(){ var className = $(this).attr("class"); }); } <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> <div class="wrapper"> <div class="test"><h1>hello 1</h1></div> <div class="no"><h1>hello 2</h1></div> <div class="no"><h1>hello 3</h1></div> <div class="test"><h1>hello 4</h1></div> </div>Tomando estos dos requisitos:
contiene una palabra
filtrar por nombre de clase
Puede filtrar por nombre de clase usando un selector "."+nombre de clase, por ejemplo, .test , para que pueda combinar el texto de entrada con "." y usar eso como un selector.
$(".wrapper>div."+filter).show(); Al combinar de esta manera, debe verificar los elementos que harán que la consulta se interrumpa (por ejemplo, un valor vacío); podría ser mejor tener una select para esto, lo que también reduciría los errores tipográficos.
Si usa un evento jquery (como ya usa jquery), this será la entrada, por lo que puede obtener el filtro con un simple:
var filter = $(this).val();Hay varias formas de mostrar/ocultar/alternar, aquí hay un método que combina lo anterior.
$("#myInput").on("keyup", myFunction); function myFunction() { var filter = $(this).val().toLowerCase().trim(); $(".wrapper>div").hide(); if (filter !== "") $(".wrapper>div."+filter).show(); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="myInput" placeholder="Search for names.."> <div class="wrapper"> <div class="test"> <h1>hello 1</h1> </div> <div class="no"> <h1>hello 2</h1> </div> <div class="no"> <h1>hello 3</h1> </div> <div class="test"> <h1>hello 4</h1> </div> </div>El método text() en jQuery devuelve el contenido de texto del elemento especificado y elimina cualquier marcado dentro de él. Lo que querría hacer es recorrer todos los divs, obtener su contenido de texto y pasarlo a través de includes para verificar si alguna parte del texto de búsqueda coincide. Si es así, lo muestra usando el método jQuery show() y lo oculta usando el método hide() . Además, no necesita usar find('div') .
function myFunction() { // Declare variables var input, filter; input = document.getElementById('myInput'); filter = input.value.toLowerCase(); $('div').each(function(){ var divTextContent = $(this).text().toLowerCase(); if (divTextContent.includes(filter)){ $(this).show(); } else { $(this).hide(); } }); } <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."> <div class="wrapper"> <div class="test"><h1>hello 1</h1></div> <div class="no"><h1>hello 2</h1></div> <div class="no"><h1>hello 3</h1></div> <div class="test"><h1>hello 4</h1></div> </div>