jQuery :contains() Selektor Problem mit Groß- und Kleinschreibung

Mein html sieht so aus

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

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

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

});

Ich möchte Inhalte auf der Clientseite dynamisch filtern. Wenn ich ein großes j eingebe, gibt es nur das zweite div zurück, während ich alle div erhalten möchte, die j enthalten, egal ob Groß- oder Kleinbuchstaben.

Sie können die ändern .contains filtern Sie, um die Groß-/Kleinschreibung zu ignorieren, oder erstellen Sie Ihren eigenen Selektor.

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

Dadurch wird ein neuer Selektor erstellt: icontains (oder Sie könnten ihn unsensibel-enthält nennen, oder was auch immer Ihnen gefällt). Die Verwendung wäre die gleiche wie enthält: $('div:icontains("Stack")'); würde passen:

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

Oder das Vorhandene überschreiben .contains Filter:

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

Wenn dies an Ort und Stelle ist,

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

würde alle drei dieser Elemente auswählen:

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

Warum nicht die verwenden filter Funktion und übergeben Sie eine Funktion, die einen Regex verwendet, bei dem die Groß-/Kleinschreibung nicht berücksichtigt wird?

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

DEMO

Hier ist mein Beitrag, hoffe es hilft 🙂

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

Der :contains() Selektor unterscheidet zwischen Groß- und Kleinschreibung.

Der übereinstimmende Text kann direkt innerhalb des ausgewählten Elements, in einem beliebigen Nachfolger dieses Elements oder einer Kombination davon erscheinen. Wie bei Attributwertselektoren kann Text innerhalb der Klammern von :contains() als reine Wörter geschrieben oder in Anführungszeichen gesetzt werden. Der Text muss eine passende Groß-/Kleinschreibung haben, um ausgewählt zu werden.

Auch erstellt a Demo falls es jemand ausprobieren möchte.

AKTUALISIEREN

Sorry, habe deine Frage wohl falsch gelesen.

Diesen jQuery-Ausdruck gefunden unter http://bugs.jquery.com/ticket/278 um einen neuen Selektor zu erstellen, der ist Groß-/Kleinschreibung egal und ich habe meine aktualisiert Demo.

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

Ich glaube nicht, dass es eine Möglichkeit gibt, dies mit einem Raw-Selektor zu tun. Der contains selector unterscheidet zwischen Groß- und Kleinschreibung und es scheint keine Version ohne Berücksichtigung der Groß-/Kleinschreibung zu geben. Ich denke, der beste Ansatz ist die Verwendung eines Filters, der das Objekt manuell abfragt

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