Comment rendre jQuery Contains insensible à la casse, y compris jQuery 1.8+?


91

J'essaye d'utiliser la casse "contient" insensiblement. J'ai essayé d'utiliser la solution à la question suivante de stackoverflow, mais cela n'a pas fonctionné:

Existe-t-il un sélecteur jQuery: contient insensible à la casse?

Pour plus de commodité, la solution est copiée ici:

jQuery.extend(
        jQuery.expr[':'], { 
                Contains : "jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0" 
});

Voici l'erreur:

Error: q is not a function
Source File: /js/jquery-1.4.js?ver=1.4
Line: 81

Voici où je l'utilise:

  $('input.preset').keyup(function() {
    $(this).next().find("li").removeClass("bold");
    var theMatch = $(this).val();
    if (theMatch.length > 1){
      theMatch = "li:Contains('" + theMatch + "')";
      $(this).next().find(theMatch).addClass("bold");
    }
  });

Mon utilisation de l'original sensible à la casse "contient" dans le même scénario fonctionne sans aucune erreur. Quelqu'un a-t-il une idée? J'apprécierais.


Dans le cas où quelqu'un est intéressé, je l' ai mis à jour mon blog sur trois contient plus sélecteurs :containsExact, :containsExactCaseet :containsRegexsélecteurs maintenant travailler dans toutes les versions de jQuery.
— Mottie le


Je pense que .filter () est un autre bon moyen. Référence
— 劉鎮 瑲

Réponses:


127

C'est ce que j'utilise dans un projet en cours, je n'ai eu aucun problème. Voyez si vous avez plus de chance avec ce format:

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

Dans jQuery 1.8, l'API pour cela a changé, la version jQuery 1.8+ de ceci serait:

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

Vous pouvez le tester ici . Pour plus de détails sur 1.8+ sélecteurs personnalisés, consultez le wiki Sizzle ici .


Tu es un sauveur. Merci.
— Matrym

3
Avez-vous une chance de parler de ce que cela fait exactement?
— Abe Miessler

4
@ClovisSix - merci pour la mise en garde, j'ai fourni une méthode 1.8+ pour faire de même, faites-moi savoir si vous avez des problèmes.
— Nick Craver

1
A noter que cela ne remplace pas: contient il suffit d'ajouter un autre sélecteur: Contient.
— albanx

3
le sélecteur doit être appelé icontains, ou quelque chose de similaire.
— Sebastian

43

Il convient de noter que la réponse est correcte mais ne couvre que :Contains, et non l'alias, :containsqui pourrait entraîner un comportement inattendu (ou pourrait être utilisé par conception pour des applications avancées qui nécessitent une recherche à la fois sensible et insensible).

Cela pourrait être résolu en dupliquant l'extension de l'alias:

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

Il m'a fallu un certain temps pour comprendre pourquoi cela ne fonctionnait pas pour moi.


J'aurais commenté cela ci-dessus, mais apparemment je ne suis pas en mesure de le faire.
— Ellipsis

5
Je ne sais pas trop où vous voulez en venir. Cela remplace le comportement attendu et documenté de :contains. Je pense qu'il est plus clair de laisser l'original :containsseul et d'appeler votre nouveau sélecteur :icontains.
— Justin Force

5
C'est à côté de mon message. La création d'un sélecteur alternatif est certainement une option valide, mais je signalais que l'extension: contient, mais en négligeant d'étendre: contient peut conduire à la confusion de l'utilisateur, quand ils donnent des résultats différents.
— Ellipsis

1
Alors merci d'avoir partagé ce "gotcha". :) Néanmoins, je pense que c'est une bonne idée de mentionner qu'il vaut mieux ne pas remplacer le comportement intégré quand il est moins difficile de créer un comportement parallèle non destructif.
— Justin Force

J'ai essayé quelques solutions différentes publiées pour cela et celle-ci a finalement fonctionné. Merci.
— taylor michels

27

Je ferais quelque chose comme ça

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

Et part :contains tranquille ...

DEMO

Alors pourquoi jQuery ne le prend pas en charge dans sa bibliothèque?! si c'est aussi simple que ça ...

parce que votre code passe-t - il le code de la Turquie?


6

Peut-être en retard ... mais,

Je préférerais suivre cette voie ...

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

De cette façon, vous NE falsifiez PAS le NATIVE '.contains' de jQuery ... Vous aurez peut-être besoin de celui par défaut plus tard ... s'il est falsifié, vous pourriez vous retrouver à stackOverFlow ...


0

je vais me permettre d'ajouter mes amis:

$.expr[":"].containsNoCase = function (el, i, m) { 
    var search = m[3]; 
    if (!search) return false; 
    return eval("/" + search + "/i").test($(el).text()); 
}; 

0

J'ai simplement pu ignorer complètement la sensibilité à la casse de jQuery pour obtenir ce que je veux en utilisant le code ci-dessous:

            $.expr[":"].contains = $.expr.createPseudo(function(arg) {
            return function( elem ) {
                return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
            };
        });

Vous pouvez utiliser ce lien pour rechercher du code en fonction de vos versions de jQuery afin d'ignorer le respect de la casse, https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/

Aussi, si vous souhaitez utiliser: contient et effectuer une recherche, vous pouvez jeter un œil à ceci: http://technarco.com/jquery/using-jquery-search-html-text-and-show-or-hide- en conséquence

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.