jQuery: contains() selektor wielkich i małych liter problem

Mój html wygląda tak 

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

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

Mój 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");

});

Chcę dynamicznie filtrować zawartość po stronie klienta. Kiedy wpiszę Duże j, zwraca tylko drugi div, podczas gdy chcę uzyskać wszystkie div, które zawierają j, czy duże lub małe litery.

Author: Phil, 2012-01-05
Source

4 answers

Możesz zmienić filtr .contains na niewrażliwy na wielkość liter lub utworzyć własny selektor.

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

Tworzy to nowy selektor: icontains(lub można go nazwać niewrażliwym-contains, lub cokolwiek pasuje do twojej fantazji). Jego użycie będzie takie samo jak contains: $('div:icontains("Stack")'); pasuje do: 

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

Lub nadpisać istniejący filtr .contains: 

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

Z tym na miejscu, 

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

Wybierze wszystkie trzy z tych elementów: 

<div>john</div>
<div>John</div>
<div>hey hey JOHN hey hey</div>
 68
Author: Highway of Life,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-05 18:49:44

Dlaczego nie użyć funkcji filter i nie przekazać funkcji, która używa wyrażenia 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

 12
Author: Adam Rackis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-05 17:48:16

Oto mój wkład, mam nadzieję, że pomoże:) 

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

Selektor :contains () uwzględnia wielkość liter.

dopasowany tekst może pojawić się bezpośrednio w zaznaczonym elemencie, w każdym z jego potomków lub w ich kombinacji. Podobnie jak w przypadku selektorów wartości atrybutów, tekst w nawiasach: contains() może być zapisany jako nagie słowa lub otoczony cudzysłowami. tekst musi mieć dopasowaną wielkość liter, aby był selected .

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

UPDATE

Przepraszam, musiałem źle odczytać twoje pytanie.

Znalazłem to wyrażenie jQuery w http://bugs.jquery.com/ticket/278 aby utworzyć nowy selektor, który jest wielkość liter niewrażliwy i zaktualizowałem moje demo .

$.extend($.expr[':'], {
  'containsi': function(elem, i, match, array) {
    return (elem.textContent || elem.innerText || '').toLowerCase()
        .indexOf((match[3] || "").toLowerCase()) >= 0;
  }
});
 2
Author: Stefan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-05 18:14:15

Nie wierzę, że jest sposób, aby to zrobić z selektorem raw. Selektor contains uwzględnia wielkość liter i nie wydaje się, aby była to wersja niewrażliwa na wielkość liter. Myślę, że najlepszym rozwiązaniem jest użycie filtra, który ręcznie zapytuje obiekt 

var filt = function (unused) {
  $(this).text().toLowerCase().indexOf(txtSearch.toLowerCase()) !== -1;
};
 0
Author: JaredPar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-05 17:37:47