JQuery: содержит() селектор прописных и строчных номеров

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

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

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

my 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, в верхнем или нижнем регистре.

Ответ 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>

Ответ 2

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

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

DEMO

Ответ 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, чтобы создать новый селектор без учета регистра, и я обновил свой демонстрация.

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

Ответ 4

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

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