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.