FoxyComplete - Ricerca di completamento automatico avanzata con immagini
Oggi ho intenzione di condividere una funzionalità di tendenza che ho implementato nei miei progetti da un po 'di tempo.
Lo chiamo "FoxyComplete" e quello che fa è recuperare i risultati di ricerca cliccabili insieme alle immagini che vengono automaticamente scaricate dal contenuto del risultato o da un file specificato. È facile da implementare e una volta fatto, facile da modificare.
L'applicazione di questa funzionalità dipende esclusivamente dalle preferenze del progettista e dello sviluppatore, ma il suo impatto sull'esperienza utente lo rende una scelta eccellente per aggiungere progetti di progettazione e sviluppo moderni.
Le unità aziendali in cui ho utilizzato personalmente questa funzionalità sono l'e-commerce, i progetti aziendali, la fotografia, l'intrattenimento e i progetti futuri che richiedono una funzione di ricerca completa.
Sono abbastanza sicuro che tutti voi avete visitato il IMDb e Mela siti Web e provato le loro funzionalità di ricerca. In caso contrario - sotto è un'anteprima di come appare la loro funzionalità di ricerca avanzata.
Sappiamo tutti che si può fare ma poi la domanda è: "Perché di solito non viene fatto su tutti quei siti Web ben fatti?". Beh, immagino che sia probabilmente una mancanza di una soluzione rapida e aperta a tutti!
Quando ho implementato la stessa ricerca di completamento automatico con immagini al mio Blog di fotografia che ho progettato qualche tempo fa, sicuramente è stato difficile da raggiungere, ma alla fine è venuto alla grande. I visitatori del mio blog si divertono molto a cercare attraverso la mia galleria di immagini e ottenere immediatamente un'anteprima di ciò che vedranno in seguito.
Di seguito è riportato l' aspetto della funzione di ricerca nel mio blog .
In questo tutorial ho intenzione di coprire i punti sotto indicati
- Una breve panoramica della sceneggiatura
- FoxyComplete come plugin WordPress (locale / dinamico)
- Implementazione di FoxyComplete come una ricerca di Youtube con immagini
- Migliorare la sicurezza
Per WordPress Designers , è un pezzo di torta e per gli sviluppatori di WordPress / PHP - è una grande opportunità per esplorare le sue numerose funzionalità e applicazioni che ha da offrire. Per l'implementazione avanzata, i requisiti sarebbero conoscenze di base di WordPress, PHP, HTML, jQuery e CSS.
Una breve panoramica della sceneggiatura
In primo luogo, facciamo subito una breve panoramica su ciò che creeremo in questo tutorial. Per favore clicca l'immagine qui sotto per a demo di base .
Si prega di tenere a mente, sto mantenendo questo tutorial ad un livello molto basilare per assicurarsi che tutti lo capiscano e chiunque può progettarlo o modificarlo in base alle proprie esigenze. La funzionalità che ho realizzato è stata ispirata da jQuery Plug-in Autocomplete di Jorn Zaefferer.
L'esempio rapido sopra compara automaticamente il titolo del risultato, ma possiamo anche modificarlo per reindirizzare a un URL su select (fatto nella sezione successiva). L'ID del campo di ricerca è mantenuto come "s", che è l'impostazione predefinita utilizzata per il campo di ricerca di WordPress (sarebbe utile se continuiamo con questo concetto per sviluppare un plugin WordPress).
Disegnare i risultati è semplice: è costituito da una struttura pulita e facile da personalizzare in base al design.
.ac_results -> .ac_results ul -> .ac_results ul li -> .ac_results ul li a -> .ac_results ul li a img e .ac_results ul li a span
Questo esempio di base utilizza un'origine dati statica che è un semplice file JavaScript in cui abbiamo dichiarato una matrice in formato JSON. Tutto ciò che facciamo è analizzare la matrice e visualizzare i risultati.
Non preoccuparti, è solo un array di base coppie chiave e valore e nient'altro. Le nostre chiavi sono il permalink di portarci alla pagina dei risultati, l' immagine all'anteprima e il titolo in cui dobbiamo cercare la stringa. Ho mantenuto un'immagine di default e un titolo di esempio per questa demo di base.
Esempio di struttura dell'array
[{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” },{“KEY 1”: “VALUE”, “KEY 2”: “VALUE”, “KEY 3”: “VALUE” }… Repeat as much as you want to]La funzionalità JavaScript è semplice. Analizziamo semplicemente la matrice JSON risultante in jQuery, formiamo i risultati in base alle nostre esigenze e passiamo la visualizzazione.
Suggerimento per gli sviluppatori: Nel caso in cui si desideri modificare la modalità di visualizzazione dei risultati, consultare il formato function () nello script foxycomplete.js. È una funzione JavaScript che accetta un array come input e restituisce HTML formattato contenente gli elementi dell'array. Piuttosto basico per capire, ma se stai cercando di cambiarlo, fallo qui!
FoxyComplete come plugin per WordPress (locale / dinamico)
Clicca l'immagine qui sotto per scaricare il plugin WordPress come file .zip.
Per i designer
Spero che tu ricordi che ho detto che doveva essere un pezzo di torta per i designer, beh, eccolo! FoxyComplete come plug-in per WordPress Plug-and-Play funziona immediatamente, è necessaria una semplice configurazione per l'implementazione di base. Tutto ciò che devi fare è scaricarlo, installarlo e divertirti mentre ti prepari.
Le opzioni del plugin sono le seguenti:
Abilita ricerca locale: dopo aver navigato su alcuni siti Web ho scoperto che la loro opzione di ricerca era incredibilmente veloce, anche con un enorme database-esempio IMDB. La prima cosa che ha colpito sono stati i loro server veloci avanzati, ma per quanto riguarda gli utenti regolari che hanno hosting condiviso e quantità variabili di dati? Questo è il motivo per cui ho reso la ricerca locale un'opzione prioritaria. Carica semplicemente un file JavaScript nel footer della tua installazione di WordPress contenente un array per tutti i tuoi post e pagine insieme ai loro URL e, se trovati, anteprime di immagini. Il plug-in fa riferimento alla ricerca dinamica, sebbene sia possibile modificarlo in qualsiasi momento per la ricerca locale.
Limite: uno sicuramente avrebbe bisogno di un controllo sul limite dei risultati visualizzati. Aiuta a mantenere la coerenza con il design e consente agli utenti di ottenere solo i risultati più rilevanti. Il valore predefinito è cinque risultati rilevanti.
Larghezza del completamento automatico: originariamente era sempre uguale alla larghezza dell'input, ma poi mi sono reso conto che non stavamo cercando su una casella di ricerca ampia in stile Google. L'impostazione predefinita è sempre la larghezza dell'elemento di input, ma è possibile modificarla in qualsiasi momento.
ID dell'input: poiché si tratta di un plugin WordPress, ho dato la preferenza a "#s" come scelta predefinita che può essere modificata in qualsiasi modo. Basta inserire l'ID (senza il '#') dell'elemento di input desiderato ed è un go.
Immagine di default: A volte il plugin potrebbe non trovare un'immagine pertinente e per questo ho incluso un'immagine demo, ma hai il controllo anche su questo: basta sostituirlo con la tua immagine di esempio nella directory dei plugin.
La ricerca dinamica ricerca il contenuto pertinente in modo intelligente e fornisce immediatamente una funzionalità di array JSON dinamico alla funzionalità. Prima raccoglie tutti i post e le pagine nell'installazione di WordPress che sono pubblicati e pubblici. Quindi cerca le immagini in 3 passaggi dal contenuto come:
- Caricamento di media
- Campo personalizzato "miniatura"
- Immagini nel contenuto del post
Una volta che ha tutti i dati, combina il titolo e il rispettivo contenuto di ogni post / pagina e cerca l'oggetto interrogato per un'esperienza di ricerca completa. Una volta trovato, diciamo X numero di elementi, spinge quelli X in un array JSON, che viene restituito alla funzionalità JavaScript.
Funzionalità dinamica vs locale
Questo è un argomento critico e sono aperto a una discussione nella sezione dei commenti. Personalmente ritengo che non vi sia nulla di male dare a quelli una fonte locale se migliora l'esperienza di molte pieghe. Un altro motivo per cui ho implementato la ricerca locale è stato perché ho trovato persino Google che lo implementa in Gmail.
Una volta che l'utente effettua l'accesso, Gmail invia una richiesta al proprio server e recupera tutti gli indirizzi e-mail e i nomi o gli alias di tutti i contatti nel footer, che vengono quindi utilizzati per i campi di completamento automatico To, CC, BCC e Labels. Cosa dici, legittimo?
Implementazione di FoxyComplete come ricerca simile a YouTube con le immagini
Come detto sopra, c'è anche molta funzionalità per gli sviluppatori. Sopra è quello che abbiamo fatto usando i feed di YouTube e poi analizzandoli in PHP per fornire i risultati richiesti in formato JSON. Puoi imparare su quelli Qui . Fai clic sull'immagine qui sotto per una demo della ricerca Foxycomplete di YouTube.
Un'altra funzionalità che puoi realizzare è il motore di ricerca di YouTube con riproduzione su clic in modal o overlay. Ad esempio, quando si cerca un video e si fa clic sui risultati del completamento automatico, viene aperta una finestra di dialogo modale o una sovrapposizione con il video al suo interno, riprodotta sul proprio sito Web ma proveniente da YouTube. Bello, non è vero?
Migliorare la sicurezza
Anche se il plugin WordPress è sicuro come ho usato WordPress Nounces , può essere reso persino sicuro utilizzando le costanti nella versione dinamica e la crittografia nel locale.
Una misura di sicurezza che abbiamo usato era quella di verificare la presenza di una chiamata Ajax e quindi anche di verificare una chiamata Ajax dallo stesso dominio, come mostrato di seguito.
//define SAME_DOMAIN to true in the Header of your document.define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');define('DOING_AJAX', true);if(IS_AJAX && DOING_AJAX && SAME_DOMAIN){//your search logic}Questo è solo uno dei numerosi modi per proteggerlo!
Conclusione
Quindi questo è stato FoxyComplete che potrebbe aiutarti molto nei tuoi progetti di progettazione e sviluppo in futuro. Questa è la versione 1.0 e farò in modo di continuare a migliorarlo con il vostro prezioso feedback e supporto.
Fatemi sapere cosa ne pensate nella sezione commenti qui sotto e dal momento che questo è ospitato in un ambiente che posso facilmente e regolarmente modificare, con i vostri super suggerimenti-lascia che sia un ottimo plugin gratuito con un'esperienza utente finale a entrambe le estremità.