FoxyComplete - Σύνθετη αναζήτηση αυτόματης συμπλήρωσης με εικόνες
Σήμερα θα μοιραστώ μια μοντέρνα λειτουργικότητα την οποία εφαρμόζω εδώ και λίγο καιρό στα σχέδιά μου.
Το ονομάζω "FoxyComplete" και αυτό που κάνει είναι να μεταφέρετε τα αποτελέσματα αναζήτησης με κλικ και μαζί με τις εικόνες είτε να αποξεσθούν αυτόματα από το περιεχόμενο του αποτελέσματος ή από ένα συγκεκριμένο αρχείο. Είναι εύκολο να εφαρμοστεί και μόλις γίνει, εύκολο να τσίμπημα.
Η εφαρμογή αυτής της λειτουργικότητας εξαρτάται αποκλειστικά από την προτίμηση του σχεδιαστή και προγραμματιστή, αλλά ο αντίκτυπός της στην εμπειρία του χρήστη την καθιστά κορυφαία επιλογή για να προσθέσει σε σύγχρονα σχέδια σχεδιασμού και ανάπτυξης.
Επιχειρηματικές μονάδες όπου προσωπικά χρησιμοποίησα αυτή τη λειτουργικότητα είναι το ηλεκτρονικό εμπόριο, τα εταιρικά σχέδια, η φωτογραφία, η ψυχαγωγία και τα μελλοντικά έργα που απαιτούν ένα ολοκληρωμένο χαρακτηριστικό αναζήτησης.
Είμαι βέβαιος ότι έχετε επισκεφτεί όλοι IMDb και μήλο ιστοσελίδες και δοκιμάσει τα χαρακτηριστικά αναζήτησης. Αν όχι - παρακάτω είναι μια προεπισκόπηση της εμφάνισης της προηγμένης λειτουργικότητας αναζήτησης.
Όλοι γνωρίζουμε ότι μπορεί να γίνει, αλλά τότε το ερώτημα είναι: "Γιατί δεν γίνεται συνήθως σε όλες αυτές τις όμορφα κατασκευασμένες ιστοσελίδες;" Λοιπόν, υποθέτω ότι είναι πιθανώς η έλλειψη μιας γρήγορης, ανοικτής σε όλους λύσης!
Όταν έχω εφαρμόσει την ίδια αναζήτηση αυτόματης συμπλήρωσης με εικόνες σε μου Φωτογραφικό Blog που σχεδίασα πριν από λίγο, ήταν σίγουρα δύσκολο να επιτευχθεί, αλλά τελικά βγήκε μεγάλη. Οι επισκέπτες στο ιστολόγιό μου απολαμβάνουν πραγματικά την αναζήτηση μέσα από την γκαλερί μου και αμέσως παίρνουν μια προεπισκόπηση του τι θα δουν στη συνέχεια.
Παρακάτω είναι πώς φαίνεται η λειτουργία αναζήτησης στο ιστολόγιό μου .
Σε αυτό το σεμινάριο θα καλύψω τα παρακάτω σημεία
- Μια σύντομη επισκόπηση του σεναρίου
- FoxyComplete ως Plugin WordPress (Τοπική / Δυναμική)
- Εφαρμογή FoxyComplete ως αναζήτηση στο YouTube με εικόνες
- Βελτίωση της ασφάλειας
Για τους WordPress Designers , είναι ένα κομμάτι κέικ και για τους WordPress / PHP Developers - είναι μια μεγάλη ευκαιρία να εξερευνήσετε τις πολυάριθμες λειτουργίες και εφαρμογές που έχει να προσφέρει. Για την προηγμένη εφαρμογή, οι απαιτήσεις θα είναι βασικές γνώσεις WordPress, PHP, HTML, jQuery και CSS.
Μια σύντομη επισκόπηση του σεναρίου
Αφήνει πρώτα να πάρει γρήγορα μια κορυφή πλέξιμο σε αυτό που θα δημιουργήσουμε σε αυτό το σεμινάριο. Κάντε κλικ στην παρακάτω εικόνα για ένα βασικό demo .
Λάβετε υπόψη ότι διατηρώ αυτό το σεμινάριο σε ένα πολύ βασικό επίπεδο για να βεβαιωθείτε ότι όλοι το καταλαβαίνουν και ότι ο καθένας μπορεί να το σχεδιάσει ή να το τσίμπημα σύμφωνα με τις απαιτήσεις τους. Η λειτουργικότητα που έκανα ήταν εμπνευσμένη από το jQuery Plug-in αυτόματης συμπλήρωσης από τον Jorn Zaefferer.
Το παραπάνω γρήγορο παράδειγμα αυτόματά συμπληρώνει τον τίτλο του αποτελέσματος, αλλά μπορούμε επίσης να το τροποποιήσουμε για να ανακατευθύνουμε σε μια διεύθυνση URL για την επιλογή (γίνεται στην επόμενη ενότητα). Το αναγνωριστικό του πεδίου αναζήτησης διατηρείται ως "s", το οποίο είναι το προεπιλεγμένο που χρησιμοποιείται για το WordPress Search Field (θα ήταν επωφελές καθώς συνεχίζουμε αυτή την έννοια για να αναπτύξουμε ένα Plugin WordPress).
Η διαμόρφωση των αποτελεσμάτων είναι εύκολη: αποτελείται από μια καθαρή δομή που είναι εύκολο να σχεδιαστεί σύμφωνα με το σχεδιασμό σας.
.ac_results -> .ac_results ul -> .ac_results ul li -> .ac_results ul li a -> .ac_results ul li a img και .ac_results ul li a span
Αυτό το βασικό παράδειγμα χρησιμοποιεί μια στατική πηγή δεδομένων που είναι ένα απλό αρχείο JavaScript στο οποίο έχουμε δηλώσει έναν πίνακα σε μορφή JSON. Όλες οι λειτουργίες μας είναι να αναλύσουμε τον πίνακα και να παρουσιάσουμε τα αποτελέσματα.
Μην ανησυχείτε - είναι απλά ένας πίνακας βασικός ζεύγη κλειδιών και τιμών και τίποτα περισσότερο από αυτό. Τα κλειδιά μας είναι το permalink που μας οδηγεί στη σελίδα αποτελεσμάτων, την εικόνα για προεπισκόπηση και τον τίτλο στον οποίο πρέπει να αναζητήσουμε τη συμβολοσειρά. Έχω διατηρήσει μια προεπιλεγμένη εικόνα και έναν τίτλο παράδειγμα για αυτή τη βασική επίδειξη.
Παράδειγμα δομής πίνακα
[{“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]Η λειτουργία JavaScript είναι εύκολη. Ακριβώς αναλύουμε την προκύπτουσα JSON Array σε jQuery, μορφοποιούμε τα αποτελέσματα σύμφωνα με τις απαιτήσεις μας και περάστε την εμφάνιση.
Συμβουλή για τους προγραμματιστές: Σε περίπτωση που θέλετε να αλλάξετε τον τρόπο εμφάνισης των αποτελεσμάτων, δείτε τη μορφή λειτουργίας () στη δέσμη foxycomplete.js. Είναι μια συνάρτηση JavaScript που παίρνει έναν πίνακα ως είσοδο και επιστρέφει μορφοποιημένη HTML που περιέχει τα στοιχεία του πίνακα. Αρκετά βασικά για να καταλάβετε, αλλά αν θέλετε να το αλλάξετε - κάντε το εδώ!
FoxyComplete ως plugin WordPress (τοπική / δυναμική)
Κάντε κλικ στην παρακάτω εικόνα για να κάνετε λήψη του πρόσθετου WordPress ως αρχείο .zip.
Για τους σχεδιαστές
Ελπίζω να θυμάστε ότι είπα ότι έπρεπε να είναι ένα κομμάτι κέικ για τους σχεδιαστές, καλά, εδώ είναι! FoxyComplete ως Plug-n-Play WordPress Plugin που λειτουργεί ευθεία έξω από το κουτί-απλά απλή διαμόρφωση απαιτείται για βασική εφαρμογή. Το μόνο που έχετε να κάνετε είναι να το κατεβάσετε, να το εγκαταστήσετε και να παίξετε γύρω, ενώ σχεδιάζετε για αυτό.
Οι επιλογές πρόσθετου είναι οι παρακάτω:
Ενεργοποίηση τοπικής αναζήτησης: Μετά την περιήγηση σε μερικές ιστοσελίδες διαπίστωσα ότι η επιλογή αναζήτησης ήταν απίστευτα γρήγορη - ακόμη και με μια τεράστια βάση δεδομένων - παράδειγμα IMDB. Το πρώτο πράγμα που έπληξε ήταν οι προηγμένοι γρήγοροι εξυπηρετητές τους - αλλά τι γίνεται με τους τακτικούς χρήστες που έχουν κοινόχρηστη φιλοξενία και ποικίλα ποσά δεδομένων; Αυτός είναι ο λόγος που έκανα την τοπική αναζήτηση επιλογή προτεραιότητας. Απλά φορτώνει ένα αρχείο JavaScript στο υποσέλιδο της εγκατάστασης του WordPress που περιέχει έναν πίνακα σε όλες τις αναρτήσεις και τις σελίδες σας μαζί με τις διευθύνσεις URL τους και, αν βρεθεί, προεπισκοπήσεις εικόνων. Το plugin έχει προεπιλεγμένη δυναμική αναζήτηση, παρόλο που μπορείτε να το αλλάξετε οποιαδήποτε στιγμή στην τοπική αναζήτηση.
Όριο: Ένα σίγουρο θα χρειαζόταν έναν έλεγχο πάνω στο όριο των αποτελεσμάτων που εμφανίζονται. Συμβάλλει στη διατήρηση της συνέπειας με το σχεδιασμό και επιτρέπει στους χρήστες να λαμβάνουν μόνο τα πιο συναφή αποτελέσματα. Απέχει από πέντε κορυφαία σχετικά αποτελέσματα.
Πλάτος της αυτόματης συμπλήρωσης: Αρχικά διατηρήθηκε πάντα ίσο με το πλάτος της εισόδου, αλλά στη συνέχεια συνειδητοποίησα ότι δεν πραγματοποιούσαμε αναζήτηση σε ένα ευρύ πλαίσιο αναζήτησης τύπου Google. Εξακολουθεί να είναι προεπιλεγμένο για το πλάτος του στοιχείου εισόδου, αλλά μπορείτε να το αλλάξετε ανά πάσα στιγμή.
ID της εισόδου: Δεδομένου ότι είναι ένα WordPress Plugin, έδωσα προτίμηση στο "#s" ως προεπιλογή που μπορεί να αλλάξει σε ό, τι θέλετε. Απλά πληκτρολογήστε το αναγνωριστικό (χωρίς το '#') του επιθυμητού στοιχείου εισόδου και είναι ένα πάει.
Προεπιλεγμένη εικόνα: Μερικές φορές το plugin μπορεί να μην βρει σχετική εικόνα και για αυτό έχω συμπεριλάβει μια εικόνα επίδειξης, αλλά έχετε και τον έλεγχο: απλά το αντικαταστήστε με τη δική σας εικόνα δείγματος στον κατάλογο plugin.
Η δυναμική αναζήτηση αναζητά το σχετικό περιεχόμενο έξυπνα και παρέχει ένα δυναμικό πίνακα JSON στη λειτουργικότητα αμέσως. Πρώτα συγκεντρώνει όλες τις θέσεις και τις σελίδες στην εγκατάσταση του WordPress που δημοσιεύονται και είναι δημόσιες. Στη συνέχεια, αναζητά τις εικόνες σε 3 βήματα από το περιεχόμενο ως εξής:
- Μεταφορτώσεις μέσων
- "Προσαρμοσμένο πεδίο μικρογραφίας"
- Εικόνες στο περιεχόμενο μετάδοσης
Αφού έχει όλα τα δεδομένα, συνδυάζει τον τίτλο και το αντίστοιχο περιεχόμενο κάθε δημοσίευσης / σελίδας και αναζητά το ερωτηθέν στοιχείο για μια ολοκληρωμένη εμπειρία αναζήτησης. Μόλις βρεθεί, ας πούμε X αριθμός αντικειμένων-ωθεί αυτά τα X είναι σε έναν πίνακα JSON, ο οποίος επιστρέφει στη λειτουργικότητα JavaScript.
Δυναμική έναντι τοπικής λειτουργικότητας
Αυτό είναι ένα κρίσιμο θέμα και είμαι ανοικτός για συζήτηση στο τμήμα σχολίων. Προσωπικά αισθάνομαι ότι δεν υπάρχει καμία βλάβη που να τους δίνει μια τοπική πηγή αν βελτιώνει την εμπειρία από πολλές πτυχές. Ένας άλλος λόγος για τον οποίο υλοποίησα την Τοπική Αναζήτηση ήταν επειδή βρήκα ακόμη και την εφαρμογή του Google στο Gmail.
Μόλις συνδεθεί ο χρήστης, το Gmail στέλνει ένα αίτημα στον διακομιστή του και συγκεντρώνει όλες τις διευθύνσεις ηλεκτρονικού ταχυδρομείου και ονόματα ή ψευδώνυμα όλων των επαφών σας στο υποσέλιδο, τα οποία στη συνέχεια χρησιμοποιούνται για τα πεδία αυτόματης συμπλήρωσης To, CC, BCC και Labels. Τι λέτε, νόμιμο;
Εφαρμογή του FoxyComplete ως αναζήτηση τύπου YouTube με εικόνες
Όπως αναφέρθηκε παραπάνω, υπάρχει επίσης μεγάλη λειτουργικότητα για τους προγραμματιστές. Πάνω από αυτό που κάναμε χρησιμοποιώντας τις ροές του YouTube και στη συνέχεια τους αναλύσαμε στην PHP για να δώσουμε τα απαιτούμενα αποτελέσματα σε μορφή JSON. Μπορείτε να μάθετε για αυτά εδώ . Κάντε κλικ στην παρακάτω εικόνα για μια επίδειξη της αναζήτησης Foxycomplete στο YouTube.
Μια άλλη λειτουργία που μπορείτε να κάνετε είναι η Μηχανή Αναζήτησης του YouTube με αναπαραγωγή σε κλικ σε μορφή modal ή επικάλυψη. Για παράδειγμα, όταν αναζητάτε ένα βίντεο και κάνετε κλικ στα αποτελέσματα του αυτόματου συμπληρώματος, ανοίγει ένα παράθυρο διαλόγου ή μια επικάλυψη με το βίντεο σε αυτό, παίζοντας στον ιστότοπό σας, αλλά προέρχεται από το YouTube. Ωραία, έτσι δεν είναι;
Βελτίωση της ασφάλειας
Παρόλο που το πρόσθετο WordPress είναι ασφαλές όπως το χρησιμοποίησα WordPress Nounces , μπορεί να γίνει ακόμα ασφαλής χρησιμοποιώντας σταθερές στη δυναμική έκδοση και κρυπτογράφηση στην τοπική.
Ένα μέτρο ασφαλείας που χρησιμοποιήσαμε ήταν να ελέγξουμε για μια κλήση Ajax και στη συνέχεια να ελέγξουμε επίσης για μια κλήση Ajax από τον ίδιο τομέα όπως φαίνεται παρακάτω.
//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}Αυτός είναι ένας από τους πολυάριθμους τρόπους για να το εξασφαλίσετε!
συμπέρασμα
Έτσι ήταν το FoxyComplete που θα μπορούσε να σας βοηθήσει σε πολλά έργα σχεδιασμού και ανάπτυξης στο μέλλον. Αυτή είναι η έκδοση 1.0 και θα φροντίσω να συνεχίσω να την βελτιώσω με την πολύτιμη ανατροφοδότηση και υποστήριξη.
Επιτρέψτε μου να μάθω τι σκέφτεστε στην παρακάτω ενότητα σχολίων και δεδομένου ότι αυτό φιλοξενείται σε ένα περιβάλλον που μπορώ να επεξεργάζομαι εύκολα και τακτικά, με τις σούπερ προτάσεις σας - σας επιτρέπει να κάνετε ένα μεγάλο δωρεάν plugin με τελική εμπειρία χρήστη και στα δύο άκρα.