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.

— 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

— 劉鎮瑲

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