jQuery: contains() selektor wielkie i małe litery problem

Question

Moje html wygląda tak

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

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

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

}); 

szukam filtrować zawartość dynamicznie po stronie klienta. Kiedy wpisuję wielką literę j, zwraca ona tylko drugi element div, podczas gdy chcę uzyskać cały element div, który zawiera j, niezależnie od wielkości litery.

Answer 1

Można zmienić filtr .contains, tak aby wielkość liter nie była rozróżniana lub utworzyć własny selektor.

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

ta tworzy nowy selektor: icontains (czy można nazwać go nieczuły-zawiera, czy cokolwiek pasuje do Twojego gustu). To Wykorzystanie byłaby taka sama jak zawiera: $('div:icontains("Stack")'); pasowałby:

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

lub zastąpić istniejący .contains filtr:

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

Mając to na miejscu,

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

by wybrać wszystkie trzy z tych elementów:

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

Answer 2

Dlaczego nie skorzystać z funkcji filter i przekazać w funkcji, która używa regex niewrażliwe na wielkość liter?

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

DEMO

Answer 3

nie wierzę, istnieje sposób, aby zrobić to z surowego selektora. Selektor contains rozróżnia wielkość liter i wydaje się, że nie ma wersji nierozróżniającej wielkości liter. Myślę, że najlepszym rozwiązaniem jest stosowanie filtrów, które ręcznie odpytuje obiektowi

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

Answer 4

Oto mój wkład, nadzieję, że to pomaga :)

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

:contains() selector jest wielkość liter.

Dopasowany tekst może pojawić się bezpośrednio w wybranym elemencie, dowolnym potomku tego elementu lub ich kombinacji. Podobnie jak w przypadku selektorów wartości atrybutów, tekst wewnątrz nawiasów: contains() może być zapisany jako puste słowa lub otoczony cudzysłowami. Tekst musi mieć pasujący do siebie case, aby go wybrać.

Utworzono również demo, jeśli ktoś chciałby go wypróbować.

UPDATE

Niestety, musiała misread swoje pytanie.

Znaleziony to wyrażenie jQuery na http://bugs.jquery.com/ticket/278 aby utworzyć nowy selektor, który jest sprawa niewrażliwe i zaktualizowałem moją demo.

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