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 } });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.