jQuery: contient la majuscule () du sélecteur et la minuscule
Mon code html ressemble à ceci
<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 dynamiquement du côté du client. Quand je tape un J majuscule, il retourne seulement le deuxième div alors que je veux obtenir tous les div qui contiennent j en majuscules ou en minuscules.
4 réponses
Vous pouvez changer le .contains le filtre doit être insensible à la casse ou créer votre propre sélecteur.
jQuery.expr[':'].icontains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
cela crée un nouveau sélecteur: icontains (ou vous pouvez l'appeler insensitive-contains, ou ce qui convient à votre fantaisie).
Son utilisation serait le même que celui contient: $('div:icontains("Stack")'); match:
<div>stack</div>
<div>Stack</div>
<div>StAcKOverflow</div>
Ou remplacer le .contains filtre:
jQuery.expr[':'].contains = function(a, i, m) {
return jQuery(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
dans ce lieu,
$("div:contains('John')");
sélectionnerait les trois de ces éléments:
<div>john</div>
<div>John</div>
<div>hey hey JOHN hey hey</div>
Pourquoi ne pas utiliser le filter fonction, et passer dans une fonction qui utilise un regex insensible à la casse?
var filteredDivs = $("div.link-item").filter(function() {
var reg = new RegExp(txtsearch, "i");
return reg.test($(this).text());
});
$('#txt').keyup(function() {
var query = $(this).val();
$("div.link-item")
.hide()
.filter(':contains("' + query + '")')
.show();
});
:contient du (de la) sélecteur est sensible à la casse.
le texte correspondant peut apparaître directement dans l'élément sélectionné, dans n'importe lequel des descendants de cet élément, ou une combinaison de ceux-ci. Comme pour les sélecteurs de valeur d'attribut, le texte entre les parenthèses de :contains() peut être écrit en mots nus ou entouré de guillemets. Le texte doivent correspondre cas être sélectionné.
a aussi créé un démo si quelqu'un veut l'essayer.
UPDATE
Désolé, j'ai dû mal lire votre question.
J'ai trouvé cette expression jQuery àhttp://bugs.jquery.com/ticket/278 pour créer un nouveau sélecteur qui est insensible à la casse et j'ai mis à jour mon démo.
$.extend($.expr[':'], {
'containsi': function(elem, i, match, array) {
return (elem.textContent || elem.innerText || '').toLowerCase()
.indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
var filt = function (unused) {
$(this).text().toLowerCase().indexOf(txtSearch.toLowerCase()) !== -1;
};