Jak ustawić niewrażliwość na wielkość liter w jQuery Contains, w tym jQuery 1.8+?

91

Próbuję użyć „zawiera” bez rozróżniania wielkości liter. Próbowałem użyć rozwiązania przy następującym pytaniu o przepełnienie stosu, ale nie zadziałało:

Czy istnieje jQuery: zawiera selektor niewrażliwy na wielkość liter?

Dla wygody rozwiązanie zostało skopiowane tutaj:

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

Oto błąd:

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

Oto, gdzie go używam:

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

Moje użycie oryginalnego słowa „zawiera” z rozróżnianiem wielkości liter w tym samym scenariuszu działa bez żadnych błędów. Czy ktoś ma jakieś pomysły? Byłbym wdzięczny.

jquery contains case-sensitive case-insensitive Matrym
źródło
W przypadku gdy ktoś jest zainteresowany, mam zaktualizowany mojego blogu na trzy dodatkowe zawiera selektorów :containsExact, :containsExactCasei :containsRegexselektorów do teraz działać we wszystkich wersjach jQuery.
Mottie
Zobacz css-tricks.com/snippets/jquery/… ,
Alan Dong
Myślę, że .filter () to kolejny dobry sposób. Odniesienie
劉鎮 瑲

Odpowiedzi:

127

To jest to, czego używam w bieżącym projekcie, nie miałem żadnych problemów. Sprawdź, czy masz więcej szczęścia z tym formatem:

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

W jQuery 1.8 API dla tego zmieniło się, wersja jQuery 1.8+ tego wyglądałaby:

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

Możesz to przetestować tutaj . Aby uzyskać więcej informacji na temat niestandardowych selektorów 1.8+, zapoznaj się z wiki Sizzle tutaj .

Nick Craver
źródło
Ratujesz życie. Dzięki.
Matrym
3
Czy możesz porozmawiać o tym, co dokładnie to robi?
Abe Miessler
4
@ClovisSix - dzięki za ostrzeżenie, podałem metodę 1.8+ na to samo, daj mi znać, jeśli masz jakieś problemy.
Nick Craver
1
Zauważ, że to nie zastępuje: zawiera, po prostu dodaj kolejny selektor: Zawiera.
albanx
3
należy wywołać selektor icontainslub coś podobnego.
Sebastian,
43

Warto zauważyć, że odpowiedź jest poprawna, ale obejmuje tylko :Contains, a nie alias, :containsktóry może prowadzić do nieoczekiwanego zachowania (lub może być używany przez projekt w przypadku zaawansowanych aplikacji, które wymagają zarówno wrażliwego, jak i niewrażliwego wyszukiwania).

Można to rozwiązać, powielając rozszerzenie aliasu: 

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; 
};

Zajęło mi trochę czasu, zanim zrozumiałem, dlaczego to nie działa.

Elipsa
źródło
Skomentowałbym to powyżej, ale najwyraźniej nie jestem w stanie.
Ellipsis
5
Nie jestem pewien, do czego zmierzasz. Zastępuje to oczekiwane, udokumentowane zachowanie :contains. Myślę, że lepiej zostawić oryginał w :containsspokoju i zadzwonić do nowego selektora :icontains.
Justin Force
5
To nie jest celem mojego postu. Utworzenie alternatywnego selektora jest z pewnością poprawną opcją, jednak zwracałem uwagę, że rozszerzenie: zawiera, ale zaniedbanie rozszerzenia: Zawartość może prowadzić do dezorientacji użytkownika, gdy daje różne wyniki.
Wielokropek
1
W takim razie dziękuję za udostępnienie tego „rozumiem”. :) Mimo to myślę, że dobrym pomysłem jest wspomnienie, że lepiej nie nadpisywać wbudowanego zachowania, gdy budowanie niedestrukcyjnego, równoległego zachowania jest mniej pracy.
Justin Force
Wypróbowałem kilka różnych rozwiązań opublikowanych w tym celu i to w końcu zadziałało. dzięki.
taylor michels
27

Zrobiłbym coś takiego 

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

I zostaw w :containsspokoju ...

PRÓBNY

Dlaczego więc jQuery nie obsługuje tego w swojej bibliotece ?! jeśli to takie proste ...

ponieważ Twój kod przekazuje kod indyka?

Mina Gabriel
źródło
6

Może się spóźnić ... ale

Wolałbym iść tą drogą ...

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

W ten sposób NIE modyfikujesz NATIVE '.contains' jQuery ... Możesz potrzebować domyślnego później ... jeśli ktoś się przy nim manipuluje , możesz wrócić do stackOverFlow ...

ErickBest
źródło
0

pozwolę sobie na dodanie moich znajomych:

$.expr[":"].containsNoCase = function (el, i, m) { 
    var search = m[3]; 
    if (!search) return false; 
    return eval("/" + search + "/i").test($(el).text()); 
};
bresleveloper
źródło
0

Po prostu mogłem całkowicie zignorować rozróżnianie wielkości liter w jQuery, aby osiągnąć to, czego chcę, używając poniższego kodu:

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

Możesz użyć tego linku, aby znaleźć kod na podstawie wersji jQuery i zignorować rozróżnianie wielkości liter, https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/

Również jeśli chcesz użyć: zawiera i przeprowadzić wyszukiwanie, możesz rzucić okiem na to: http://technarco.com/jquery/using-jquery-search-html-text-and-show-or-hide- odpowiednio

Umesh Patil
źródło