Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

215
Vistas
Atributo de datos de búsqueda del elemento con Jquery, con coincidencias parciales

Estoy creando un filtro de elementos, usando un campo de entrada y el evento on("keyup"). Se parece a esto:

 $("#inputFilter").on("keyup", filterPrograms);

Está funcionando bien para encontrar elementos dentro de una clase, como este:

 <h6 class="programName">Science</h6>

Sin embargo, dentro de algunos de esos H6, he agregado un atributo de datos, así:

 <h6 class="programName" data-tag="indigenous interdisciplinary ">Aboriginal Studies</h6>

¿Cómo puedo modificar el siguiente código para filtrar tanto el texto de la clase (actualmente en funcionamiento) como el contenido de la etiqueta de datos? Esto simplemente oculta el bloque principal '.mix' siempre que una coincidencia parcial no sea cierta. Aquí está mi función:

 function filterPrograms(event) { // Retrieve the input field text var filter = $('#inputFilter').val(); // Loop through the blocks $(".programName").each(function(){ // this part isn't working!! dataResult = $(this).is('[data-tag*='+filter+']') < 0; // If the item does not contain the text phrase, hide it textResult = $(this).text().search(new RegExp(filter, "i")) < 0; if (textResult || dataResult) { $(this).closest(".mix").hide(); } else { $(this).closest(".mix").show(); } }); }

Ahora, estoy bastante seguro de que es porque .is() nunca coincidirá por completo, por lo que necesito una coincidencia parcial. En el ejemplo anterior, escribir "indi" debería proporcionar un resultado positivo contra el contenido del atributo de etiqueta de datos; esto no funciona Escribir "abo" coincide con textResult y funciona bien.

Sé que me estoy perdiendo algo, pero leer la documentación (y SO) sobre esto no está ayudando. Gracias por adelantado.

Editar: aquí está la función de trabajo con la solución de @Triptych:

 $(".programName").each(function(){ // If the item does not contain the text phrase hide it dataResult = $(this).is('[data-tag*="'+filter+'"]'); textResult = $(this).text().search(new RegExp(filter, "i")) < 0; if (textResult && !dataResult) { $(this).closest(".mix").hide(); // Hide the item if there are no matches } else { $(this).closest(".mix").show(); // Show the item if there are matches } });
about 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

Bueno, por un lado, no puedes comparar el resultado de .is() con 0 de esa manera. is() devuelve un valor booleano.

Así que cambia esto.

 dataResult = $(this).is('[data-tag*='+filter+']') < 0;

A esto.

 dataResult = $(this).is('[data-tag*="'+filter+'"]');

Tenga en cuenta que también cité la cadena para la coincidencia de atributos, lo que permitirá que la consulta incluya espacios.

about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda