jQuery: contiene() Selettore di lettere maiuscole e minuscole problema

Question

mio html assomiglia a questo

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

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

miei 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"); 

}); 

sto cercando di filtrare i contenuti in modo dinamico sul lato client. Quando digito la j maiuscola, restituisce solo il secondo div mentre voglio ottenere tutti i div che contengono j sia maiuscoli che minuscoli.

Answer 1

È possibile modificare il filtro .contains essere case insensitive o creare il proprio selettore.

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

Questo crea un nuovo selettore: icontains (o si potrebbe chiamarla-insensitive contiene, o comunque sia la vostra fantasia). E 'utilizzo potrebbe essere lo stesso contiene: $('div:icontains("Stack")'); sarebbe partita:

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

O ignorare l'esistente .contains filtro:

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

Con questo in luogo,

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

avrebbe selezionare tutti tre di questi elementi:

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

Answer 2

Perché non utilizzare la funzione filter e passare una funzione che utilizza un'espressione regolare senza distinzione tra maiuscole e minuscole?

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

DEMO

Answer 3

Non credo ci sia un modo per fare questo con un selettore crudo. Il selettore contains fa distinzione tra maiuscole e minuscole e non sembra essere una versione maiuscole e minuscole. Credo che l'approccio migliore è quello di utilizzare un filtro che interroga manualmente l'oggetto

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

Answer 4

Ecco il mio contributo, spero che aiuta :)

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

Il :contains() selector è case sensitive.

Il testo corrispondente può essere visualizzato direttamente all'interno dell'elemento selezionato, in uno qualsiasi dei discendenti di quell'elemento o in una combinazione di questi. Come con i selettori del valore dell'attributo, il testo tra parentesi di: contains() può essere scritto come parole nude o racchiuso tra virgolette. Per il testo deve essere selezionato il caso corrispondente.

Crea anche un demo se qualcuno vorrebbe provarlo.

UPDATE

Siamo spiacenti, deve aver frainteso la tua domanda.

Trovato questa espressione jQuery in http://bugs.jquery.com/ticket/278 per creare un nuovo selettore che è case insensitive e ho aggiornato il mio demo.

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