jQuery :contains() sélecteur majuscules et minuscules problème

Question

Mon html ressemble à ça

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

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

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

});

Je cherche à filtrer le contenu de manière dynamique côté client. Lorsque je tape un j majuscule, il ne renvoie que le deuxième div alors que je veux obtenir tous les div qui contiennent j, qu'il s'agisse de majuscules ou de minuscules.

Answer 1

Pourquoi ne pas utiliser la fonction filter et transmettre une fonction qui utilise une expression régulière insensible à la casse ?

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

DÉMO

Answer 2

Je ne crois pas qu'il existe un moyen de le faire avec un sélecteur brut. Le contains est sensible à la casse et il ne semble pas y avoir de version insensible à la casse. Je pense que la meilleure approche est d'utiliser un filtre qui interroge manuellement l'objet

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