JQuery -Filterbilder (Suchfilter)

Dieser Artikel zeigt, dass das Erstellen eines Live -Image -Suchfilters mit JQuery erstellt wird, das von Flickr -Bilddaten betrieben wird. Die Suche dynamisch Aktualisierungen von Bildern, während Sie eingeben. Dies wird mit dem Quicksilver Style JQuery -Plugin erreicht, das einen JavaScript -String -Ranking -Algorithmus zur effizienten Suche implementiert.

Kernfunktionalität:

Der primäre jQuery -Code für die Live -Suche ist präzise:

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

Dieses Snippet hört auf KeyUp -Ereignisse in einem Element mit der ID "Filter". Anschließend werden Elemente in der Klasse ".Filtered" aufgeführt und diejenigen versteckt, die nicht mit dem Eingabetxt übereinstimmen (Fall-unempfindlich). Eine Anzahl von passenden Elementen wird ebenfalls angezeigt.

Quicksilver Live -Such -Plugin:

Der Artikel beschreibt auch das Quicksilver -Plugin, entscheidend für die Leistung der Live -Suche:

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

Dieses Plugin verbessert die Suchfunktionalität, indem ein ausgefeilterer String-Matching-Algorithmus bereitgestellt wird, der Geschwindigkeit und Relevanz verbessert.

vollständige Bildsuchcode:

Der vollständige Code integriert Flickr -Daten ab, Bildanzeige und die Live -Suchfunktion:

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

Dieser Code holt Flickr -Fotos über einen JSON -API -Aufruf, erstellt dynamisch Bildelemente und wendet die Live -Suchfunktion an.

häufig gestellte Fragen (FAQs):

Der Artikel endet mit einem umfassenden FAQ

• Filterung nach Attributen: Verwenden Sie und .filter(), um Bilder basierend auf ihren Attributen auszuwählen (z. B. .attr(), alt). src
• Filterung nach Abmessungen: Verwenden Sie , .filter() und .width(), um Bilder basierend auf der Größe auszuwählen. .height()
• Filterung durch Sichtbarkeit: Verwenden von und :visible selektoren. :hidden
• Filterung nach Quell -URL, DOM -Position, CSS -Eigenschaften, Datenattributen, übergeordnetem Element, Index und Alt -Text: detaillierte Erklärungen und Code -Beispiele für jedes Szenario werden bereitgestellt.

Diese verbesserte Zusammenfassung behält die Schlüsselinformationen bei und verbessert die Klarheit und Lesbarkeit. Das Bild ist enthalten und sein Format ist erhalten.

Das obige ist der detaillierte Inhalt vonJQuery -Filterbilder (Suchfilter). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!