jQuery: contains() selector de mayúsculas y minúsculas tema

Question

Mi html se ve así

<input id="txt" value=""></input> 

<div class="link-item">jK</div> 
<div class="link-item">JFOO</div> 

mis js

$('#txt').keyup(function(){ 

    var txtsearch = $('#txt').val(); 
    var filt = $("div.link-item:contains('" + txtsearch +"')"); 

    $("div.link-item").css("display", "none") 
     .filter(filt) 
     .css("display", "block"); 

}); 

Busco para filtrar el contenido de forma dinámica en el lado del cliente. Cuando escribo un j mayúscula, solo devuelve el segundo div, mientras que quiero obtener todos los div que contengan j, ya sea mayúscula o minúscula.

Answer 1

Puede cambiar el filtro .contains ser sensible a mayúsculas o crear su propio selector.

jQuery.expr[':'].icontains = function(a, i, m) { 
    return jQuery(a).text().toUpperCase() 
     .indexOf(m[3].toUpperCase()) >= 0; 
}; 

Esto crea un nuevo selector: icontains (o usted podría nombrar insensible contiene, o lo que sea apropiado a su fantasía). Su uso sería el mismo que contiene: $('div:icontains("Stack")'); coincidiría:

<div>stack</div> 
<div>Stack</div> 
<div>StAcKOverflow</div> 

o anular los .contains filtro existente:

jQuery.expr[':'].contains = function(a, i, m) { 
    return jQuery(a).text().toUpperCase() 
     .indexOf(m[3].toUpperCase()) >= 0; 
}; 

Con esto en su lugar,

$("div:contains('John')"); 

sería seleccionar todo tres de estos elementos:

<div>john</div> 
<div>John</div> 
<div>hey hey JOHN hey hey</div> 

Answer 2

¿Por qué no utilizar la función filter y pasar una función que utiliza una expresión regular insensible a mayúsculas y minúsculas?

var filteredDivs = $("div.link-item").filter(function() { 
    var reg = new RegExp(txtsearch, "i"); 
    return reg.test($(this).text()); 
}); 

DEMO

Answer 3

No creo que hay una manera de hacer esto con un selector de crudo. El selector contains distingue entre mayúsculas y minúsculas y no parece haber una versión insensible a mayúsculas y minúsculas. Creo que el mejor enfoque consiste en utilizar un filtro que consulta manualmente el objeto

var filt = function (unused) { 
    $(this).text().toLowerCase().indexOf(txtSearch.toLowerCase()) !== -1; 
}; 

Answer 4

Aquí está mi aporte, espero que ayude :)

$('#txt').keyup(function() { 
    var query = $(this).val(); 
    $("div.link-item") 
     .hide() 
     .filter(':contains("' + query + '")') 
     .show(); 
}); 

El :contains() selector entre mayúsculas y minúsculas.

El texto coincidente puede aparecer directamente dentro del elemento seleccionado, en cualquiera de los descendientes de ese elemento, o una combinación de los mismos. Al igual que con los selectores de valores de atributo, el texto dentro de los paréntesis de: contains() se puede escribir como palabras simples o rodeado de comillas. El texto debe tener una coincidencia de mayúsculas y minúsculas para ser seleccionado.

también creó un demo si alguien quisiera probarlo.

ACTUALIZACIÓN

Lo sentimos, debe haber leído mal su pregunta.

Encontrado esta expresión jQuery en http://bugs.jquery.com/ticket/278 para crear un nuevo selector que es sensible a mayúsculas y he actualizado mi demo.

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