imej penapis jQuery (penapis carian)

Artikel ini menunjukkan membina penapis carian imej secara langsung menggunakan jQuery, yang dikuasakan oleh data imej Flickr. Carian kemas kini secara dinamik dipaparkan imej semasa anda menaip. Ini dicapai menggunakan plugin jQuery gaya Quicksilver, yang melaksanakan algoritma ranking rentetan JavaScript untuk mencari yang cekap.

Fungsi teras:

kod jQuery utama untuk carian langsung adalah ringkas:

$("#filter").keyup(function () {
    var filter = $(this).val(), count = 0;
    $(".filtered:first li").each(function () {
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).addClass("hidden");
        } else {
            $(this).removeClass("hidden");
            count++;
        }
    });
    $("#filter-count").text(count);
});

Coretan ini mendengarkan untuk acara utama pada elemen dengan "penapis" ID. Ia kemudian menyenaraikan item dalam kelas ".filtered", menyembunyikan mereka yang tidak sepadan dengan teks input (kes-insensitif). Kiraan item yang sepadan juga dipaparkan.

Quicksilver Live Search Plugin:

artikel ini juga memperincikan plugin Quicksilver, penting untuk prestasi carian langsung:

Plugin ini meningkatkan fungsi carian dengan menyediakan algoritma yang sesuai dengan rentetan, meningkatkan kelajuan dan kaitan.

(function($) {  
    // ... (Plugin code as in original input) ...
})(jQuery);

kod carian imej lengkap:

kod lengkap mengintegrasikan pengambilan data Flickr, paparan imej, dan fungsi carian langsung:

Kod ini mengambil gambar Flickr melalui panggilan API JSON, secara dinamik mencipta elemen imej, dan menggunakan fungsi carian hidup.

/* ... (Full code as in original input) ... */

Soalan Lazim (Soalan Lazim):

Artikel ini disimpulkan dengan seksyen Soalan Lazim yang komprehensif yang menangani pelbagai teknik penapisan imej jQuery, termasuk:

penapisan oleh atribut:

menggunakan
• dan untuk memilih imej berdasarkan atribut mereka (mis., , ). .filter() .attr() alt penapisan mengikut dimensi: src menggunakan
,
• , dan untuk memilih imej berdasarkan saiz. .filter() .width() penapisan dengan penglihatan: .height() menggunakan
dan
• pemilih. Penapisan oleh URL sumber, kedudukan DOM, sifat CSS, atribut data, elemen induk, indeks, dan teks ALT: penjelasan terperinci dan contoh kod untuk setiap senario disediakan. :visible :hidden
Ringkasan yang dipertingkatkan ini mengekalkan maklumat utama sambil meningkatkan kejelasan dan kebolehbacaan. Imej dimasukkan dan formatnya dipelihara.

Atas ialah kandungan terperinci imej penapis jQuery (penapis carian). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!