Uso de jQuery de contains y toLowerCase()

Question

Estoy tratando de comparar una cadena dada en una entrada al contenido de un div usando jQuery contain.

El problema es que quiero poder verificar si la cadena está contenida independientemente de mayúsculas/minúsculas.

Esta es mi función:

$(document).ready(function() { 
    drawDimensions('dContent'); 
    $('#dSuggest').keyup(function() { 
     var dInput = this.value; 
     $(".dDimension:contains('" + dInput + "')").css("display","block"); 
    }); 
}); 

Así que si uno de los divs .dDimension contiene 'Fecha' y un usuario pulsa la tecla 'D', quiero mostrar ese elemento.

¿es posible?

Answer 1

Puede utilizar .filter^[docs]:

var dInput = this.value.toLowerCase(); 

$(".dDimension").filter(function() { 
    return $(this).text().toLowerCase().indexOf(dInput) > -1; 
}).css("display","block"); 

Answer 2

Usted puede escribir su propio selector mediante la extensión de jQuery. Prueba este

$.extend($.expr[':'], { 
    'containsi': function(elem, i, match, array) 
    { 
    return (elem.textContent || elem.innerText || '').toLowerCase() 
    .indexOf((match[3] || "").toLowerCase()) >= 0; 
    } 
}); 

Uso del $(".dDimension:containsi('" + dInput + "')").css("display","block");

Answer 3

Los últimos comentarios en the jQuery documentation for contains proporciona una implementación '' icontains que pueden adaptarse a usted.

$.expr[':'].icontains = function(obj, index, meta, stack){ 
    return (obj.textContent || obj.innerText || jQuery(obj).text() || '').toLowerCase().indexOf(meta[3].toLowerCase()) >= 0; 
}; 

// Example usage. 
$("div:icontains('John')").css("text-decoration", "underline"); 

Answer 4

Tenga una mirada en this example, que extender los selectores de jQuery con un selector de mayúsculas y minúsculas contiene que llama containsi, así:

$.extend($.expr[':'], { 
    'containsi': function (elem, i, match, array) { 
     return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || '').toLowerCase()) >= 0; 
    } 
});