Come faccio a rendere jQuery Contains insensibile al maiuscolo / minuscolo, incluso jQuery 1.8+?


91

Sto cercando di utilizzare "contiene" in modo insensibile. Ho provato a utilizzare la soluzione alla seguente domanda di stackoverflow, ma non ha funzionato:

Esiste un selettore jQuery: contains che non fa distinzione tra maiuscole e minuscole?

Per comodità, la soluzione viene copiata qui:

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

Ecco l'errore:

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

Ecco dove lo sto usando:

  $('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");
    }
  });

Il mio utilizzo della distinzione tra maiuscole e minuscole originale "contiene" nello stesso scenario funziona senza errori. Qualcuno ha qualche idea? Si mi farebbe piacere.


Nel caso in cui qualcuno è interessato, ho aggiornato il mio post sul blog su tre aggiuntivo contiene selettori :containsExact, :containsExactCasee :containsRegexselettori ad ora il lavoro in tutte le versioni di jQuery.
Mottie


Penso che .filter () sia un altro buon modo. Riferimento
劉鎮 瑲

Risposte:


127

Questo è quello che sto usando in un progetto in corso, non ho avuto problemi. Vedi se hai più fortuna con questo formato:

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

In jQuery 1.8 l'API per questo è cambiata, la versione jQuery 1.8+ di questo sarebbe:

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

Puoi provarlo qui . Per maggiori dettagli su 1.8+ selettori personalizzati, controlla il wiki di Sizzle qui .


Sei un salvavita. Grazie.
Matrym

3
C'è qualche possibilità che tu possa parlare esattamente di cosa sta facendo?
Abe Miessler

4
@ClovisSix - grazie per l'avviso, ho fornito un metodo 1.8+ per fare lo stesso, fammi sapere se hai problemi.
Nick Craver

1
Da notare che questo non sostituisce: contiene basta aggiungere un altro selettore: contiene.
albanx

3
il selettore dovrebbe essere chiamato icontains, o qualcosa di simile.
Sebastian

43

Vale la pena notare che la risposta è corretta ma solo copre :Contains, e non l'alias :containsche potrebbe portare a comportamenti imprevisti (o potrebbe essere utilizzato dalla progettazione per applicazioni avanzate che richiedono una ricerca sia sensibile che insensibile).

Questo potrebbe essere risolto duplicando l'estensione per 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; 
};

Mi ci è voluto un po 'per capire perché non funzionava per me.


Avrei commentato questo sopra, ma a quanto pare non sono in grado di farlo.
Ellipsis

5
Non sono sicuro di cosa stai ottenendo qui. Ciò sovrascrive il comportamento previsto e documentato di :contains. Penso che sia più chiaro lasciare l'originale :containsda solo e chiamare il tuo nuovo selettore :icontains.
Justin Force

5
Non è questo il punto del mio post. Creare un selettore alternativo è sicuramente un'opzione valida, tuttavia stavo facendo notare che extending: contains, ma trascurando di estendere: Contains potrebbe portare a confusione dell'utente, quando producono risultati diversi.
Ellissi il

1
Allora grazie per aver condiviso questo "gotcha". :) Tuttavia, penso che sia una buona idea menzionare che è meglio non sovrascrivere il comportamento integrato quando è meno impegnativo costruire un comportamento parallelo non distruttivo.
Justin Force

Ho provato alcune soluzioni diverse pubblicate per questo e questo alla fine ha funzionato. Grazie.
taylor michels

27

Farei qualcosa di simile

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

E lascia :containsstare ...

DEMO

Allora perché jQuery non lo supporta nella sua libreria ?! se è così facile ...

perché il tuo codice supera il codice turchia?


6

Potrebbe essere tardi ... ma,

Preferirei andare in questo modo ..

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

In questo modo, tu NON manomettere il NATIVE '.contains' di jQuery ... Potresti aver bisogno di quello predefinito in seguito ... se manomesso, potresti ritrovarti a stackOverFlow ...


0

mi permetto di aggiungere i miei amici:

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

0

Sono stato in grado di ignorare del tutto la distinzione tra maiuscole e minuscole di jQuery per ottenere ciò che voglio utilizzando il codice seguente:

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

Puoi utilizzare questo collegamento per trovare il codice basato sulle tue versioni di jQuery per ignorare la distinzione tra maiuscole e minuscole, https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/

Inoltre se vuoi usare: contains e fare qualche ricerca potresti voler dare un'occhiata a questo: http://technarco.com/jquery/using-jquery-search-html-text-and-show-or-hide- di conseguenza

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.