Flexdatalist - Προσθήκη αυτόματου συμπληρώματος με

ο HTML5 στοιχείο είναι πολύ χρήσιμο στη σύγχρονη ανάπτυξη frontend. Ωστόσο, είναι ένα από τα στοιχεία που δεν γνωρίζουν πολλοί προγραμματιστές.

Λειτουργεί σε ένα πεδίο εισαγωγής όπου μπορείτε αυτόματη προσέλκυση ορισμένων τιμών για την είσοδο. Η προεπιλεγμένη ρύθμιση φαίνεται καλή και καλύψαμε κάποιες συμβουλές για την κωδικοποίηση για τη δημιουργία δροσερών εφέ με τα δεδομένα που υποστηρίζουν αυτόματα τα δεδομένα.

Ωστόσο, είναι πολύ πιο εύκολο εργασία με ένα plugin όπως Flexdatalist. Το υποστηρίζει μια ευρύτερη σειρά προγραμμάτων περιήγησης και σας επιτρέπει να προσαρμόστε πλήρως το σχέδιο του datalist σας.

Δεν έχουν όλοι την ανάγκη για δυνατότητες αυτόματης συμπλήρωσης και με φυσικούς κώδικες HTML5, ίσως να μην ενοχλείτε με ένα plugin. Ωστόσο, ο Flexdatalist είναι ίσως ο καλύτερος εκεί έξω, διότι βασίζεται στις φυσικές συμπεριφορές δεδομένων να προσθέσω:

• Υποστηριζόμενη υποστήριξη κινητής τηλεφωνίας
• Επιπλέον περιγραφές για κάθε στοιχείο
• Επιλογές πολλαπλών επιλογών ταυτόχρονα
• Χειριστές προσαρμοσμένων συμβάντων

Του όλα τροφοδοτούνται από jQuery, έτσι θα το κάνετε χρειάζονται ένα αντίγραφο της τελευταίας έκδοσης για να τρέξει αυτό. Επίσης έρχεται με το δικό του φύλλο στυλ CSS που ίσως θέλετε να συνδυάσετε σε ένα αρχείο CSS για να μειώσετε τις αιτήσεις HTTP.

Μπορείς να βρεις πλήρεις οδηγίες εγκατάστασης στην κύρια σελίδα επίδειξης που περιλαμβάνει κατεβάστε συνδέσεις στα αρχεία Flexdatalist.

Είναι πολύ απλό να δημιουργηθεί, με μόνο μία γραμμή JavaScript. Από προεπιλογή, το πρόσθετο στοχεύει όλες τις εισόδους με την κλάση .flexdatalist, έτσι απλά προσθέτοντας ότι στον κώδικα σας θα πρέπει να είναι αρκετό για να δείτε τα αποτελέσματα.

Μόλις προσθέσετε το στοιχείο στο πεδίο εισαγωγής και το Flexdatalist χειρίζεται το υπόλοιπο. Θα το κάνει Αυτόματη σύνταξη της λίστας, συμπεριλαμβανομένου του προαιρετικού περιγραφικού κειμένου.

Ο απλούστερος τρόπος για να προσθέσετε επιπλέον κείμενο είναι μέσω ενός αρχείου JSON που μπορείτε επισυνάψτε την εισαγωγή σας μέσω ενός χαρακτηριστικού δεδομένων.

Για παράδειγμα, εάν δείτε τη σελίδα επίδειξης Flexdatalist, θα βρείτε a “Χώρες” πεδίο εισαγωγής με το χαρακτηριστικό δεδομένα-δεδομένα = 'countries.json'. Αυτό αναφέρει ένα απομακρυσμένο αρχείο που αποθηκεύει όλα τα ακατέργαστα δεδομένα εισόδου εξωτερικά.

Πολλά από αυτά τα πεδία μπορείτε επιβραδύνετε λίγο τη σελίδα. Ωστόσο, δεν μπορώ να φανταστώ ότι πολλοί ιστότοποι θα τρέξουν περισσότερες από μερικές από αυτές τις μορφές δεδομένων σε μια σελίδα, για να μην αναφέρουμε ακόμη και με αυτό το plugin jQuery, είναι ακόμα αρκετά γρήγορα.

Για να ξεκινήσετε, απλά επισκεφθείτε το repo GitHub και κατεβάστε ένα αντίγραφο. Αυτό περιλαμβάνει a σύνδεσμο προς την κύρια σελίδα επίδειξης το οποίο διαθέτει επίσης πλήρη τεκμηρίωση για τη ρύθμιση, τις επιλογές JavaScript και πολλά δείγματα αποσπασμάτων κώδικα για να μεταβείτε.