Bagaimana cara membuat jQuery Contains case insensitive, termasuk jQuery 1.8+?

91

Saya mencoba menggunakan huruf besar "berisi" secara tidak sensitif. Saya mencoba menggunakan solusi pada pertanyaan stackoverflow berikut, tetapi tidak berhasil:

Apakah ada jQuery yang tidak peka huruf besar / kecil: berisi selector?

Untuk kenyamanan, solusinya disalin di sini:

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

Inilah kesalahannya:

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

Di sinilah saya menggunakannya:

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

Saya menggunakan case sensitive asli "berisi" dalam skenario yang sama bekerja tanpa kesalahan. Apakah ada yang punya ide? Saya menghargainya.

jquery contains case-sensitive case-insensitive Matrym
sumber
Jika ada yang tertarik, saya telah memperbarui posting blog saya di tiga tambahan berisi selektor :containsExact, :containsExactCasedan :containsRegexselektor sekarang bekerja di semua versi jQuery.
Mottie
Lihat css-tricks.com/snippets/jquery/… ,
Alan Dong
Saya pikir .filter () adalah cara bagus lainnya. Referensi
劉鎮 瑲

Jawaban:

127

Ini adalah apa yang saya gunakan dalam proyek saat ini, tidak ada masalah. Lihat apakah Anda lebih beruntung dengan format ini:

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

Di jQuery 1.8, API untuk ini berubah, versi jQuery 1.8+ ini akan menjadi:

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

Anda bisa mengujinya di sini . Untuk detail lebih lanjut tentang 1.8+ pemilih khusus, lihat wiki Sizzle di sini .

Nick Craver
sumber
Anda adalah penyelamat hidup. Terima kasih.
Matrym
3
Adakah kemungkinan Anda dapat berbicara tentang apa yang sebenarnya dilakukan ini?
Abe Miessler
4
@ClovisSix - terima kasih atas perhatiannya, saya menyediakan metode 1.8+ untuk melakukan hal yang sama, beri tahu saya jika Anda mengalami masalah.
Nick Craver
1
Untuk Perhatikan bahwa ini tidak menggantikan: berisi hanya menambahkan selektor lain: Berisi.
albanx
3
pemilih harus dipanggil icontains, atau yang serupa.
Sebastian
43

Perlu dicatat bahwa jawabannya benar tetapi hanya mencakup :Contains, dan bukan alias :containsyang dapat menyebabkan perilaku tidak terduga (atau dapat digunakan dengan desain untuk aplikasi tingkat lanjut yang memerlukan pencarian sensitif dan tidak sensitif).

Ini dapat diselesaikan dengan menduplikasi ekstensi untuk 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; 
};

Butuh beberapa saat untuk mencari tahu mengapa itu tidak berhasil untuk saya.

Elipsis
sumber
Saya akan mengomentari ini di atas, tetapi ternyata saya tidak bisa.
Ellipsis
5
Saya tidak yakin apa yang Anda maksud di sini. Ini menimpa perilaku yang didokumentasikan dan diharapkan dari :contains. Saya pikir lebih jelas untuk membiarkan yang asli :containsdan memanggil pemilih baru Anda :icontains.
Justin Force
5
Itu bukan inti dari posting saya. Membuat pemilih alternatif tentu saja merupakan pilihan yang valid, namun saya telah menunjukkan bahwa memperluas: berisi, tetapi mengabaikan untuk memperluas: Mengandung dapat menyebabkan kebingungan pengguna, ketika menghasilkan hasil yang berbeda.
Ellipsis
1
Terima kasih telah membagikan "gotcha" ini. :) Tetap saja, saya pikir adalah ide yang baik untuk menyebutkan bahwa lebih baik tidak menimpa perilaku bawaan saat membangun perilaku paralel yang non-destruktif kurang berhasil.
Justin Force
Saya mencoba beberapa solusi berbeda yang diposting untuk ini dan yang ini akhirnya berhasil. Terima kasih.
taylor michels
27

Saya akan melakukan sesuatu seperti ini 

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

Dan Tinggalkan :containsSendiri ...

DEMO

Jadi mengapa jQuery tidak mendukungnya di perpustakaannya ?! jika semudah itu ...

karena Apakah kode Anda melewati kode turki?

Mina Gabriel
sumber
6

Mungkin terlambat .... tapi,

Saya lebih suka pergi dengan cara ini ..

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

Dengan cara ini, Anda JANGAN merusak NATIVE '.contains' jQuery's ... Anda mungkin memerlukan yang default nanti ... jika dirusak, Anda mungkin akan kembali ke stackOverFlow ...

ErickBest
sumber
0

saya akan mengizinkan diri saya untuk menambahkan teman saya:

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

Saya hanya bisa mengabaikan sensitivitas huruf jQuery sama sekali untuk mencapai apa yang saya inginkan menggunakan kode di bawah ini:

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

Anda dapat menggunakan tautan ini untuk menemukan kode berdasarkan versi jQuery Anda untuk mengabaikan sensitivitas huruf besar / kecil, https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/

Juga jika Anda ingin menggunakan: berisi dan melakukan beberapa pencarian, Anda mungkin ingin melihat ini: http://technarco.com/jquery/using-jquery-search-html-text-and-show-or-hide- demikian

Umesh Patil
sumber