jQuery: содержит () селектор заглавных и строчных вопрос

Question

Мой HTML выглядит так

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

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

мой 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");

});

Я хочу динамически фильтровать контент на стороне клиента. Когда я набираю заглавную букву j, он возвращает только второй div, тогда как я хочу получить все div, содержащие j, в верхнем или нижнем регистре.

Answer 1

Вы можете изменить фильтр .contains без учета регистра или создать свой собственный селектор.

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

Это создаст новый селектор: icontains (или вы можете назвать его нечувствительным-содержащим, или любым другим, подходящимваше воображение).Его использование будет таким же, как и содержит: $('div:icontains("Stack")'); будет соответствовать:

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

Или переопределить существующий фильтр .contains:

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

С этим на месте,

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

выберет все три из этих элементов:

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

Answer 2

Почему бы не использовать функцию filter и передать функцию, которая использует регулярное выражение без учета регистра?

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

DEMO

Answer 3

Вот мой вклад, надеюсь, он поможет:)

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

Селектор : contains () чувствителен к регистру.

Соответствующий текст может появляться непосредственно внутри выбранного элемента, в любом из потомков этого элемента или их комбинации. Как и в случае селекторов значений атрибута, текст в скобках: contains () может быть записан как пустые слова или заключен в кавычки. Текст должен иметь соответствующий регистр для выбора .

Также создал демо , если кто-то хотел бы попробовать его.

UPDATE

Извините, возможно, неправильно прочитал ваш вопрос.

Нашел это выражение jQuery в http://bugs.jquery.com/ticket/278, чтобы создать новый селектор, который нечувствителен к регистру , и я обновил demo .

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

Answer 4

Я не верю, что есть способ сделать это с помощью необработанного селектора. Селектор contains чувствителен к регистру, и, похоже, версия не чувствительна к регистру. Я думаю, что лучше всего использовать фильтр, который вручную запрашивает объект

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