Πώς να δημιουργήσετε ένα Datalist που είναι άμεσα αναζητήσιμο

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

Αυτή η συμπεριφορά μπορεί να επιτευχθεί με το Το στοιχείο HTML που εμφανίζει προτάσεις εισαγωγής για διαφορετικούς ελέγχους, όπως το ετικέτα. Ωστόσο εμφανίζει μόνο τις διαθέσιμες επιλογές όταν ο χρήστης έχει ήδη γράψατε κάτι στο πεδίο εισαγωγής.

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

Σε αυτήν την ανάρτηση, θα δούμε πώς να δημιουργήσετε ένα αναπτυσσόμενη λίστα που μπορεί να αναζητηθεί ανά πάσα στιγμή χρησιμοποιώντας το ετικέτα είναι το ίδιο με ο ταυτότητα απο ετικέτα - έτσι συνδέουμε μεταξύ μας.

2. Κάντε το Datalist Visible

Από προεπιλογή, το Το στοιχείο HTML είναι κεκρυμμένος. Μπορούμε μόνο να το δούμε, όταν εμείς αρχίστε να πληκτρολογείτε μια είσοδο στο πεδίο που συνδέεται με το datalist.

Ωστόσο, υπάρχει ένας τρόπος να "εξαναγκαστεί" το περιεχόμενο του datalist (δηλ. Όλες τις επιλογές του) να εμφανιστεί στην ιστοσελίδα. Χρειαζόμαστε μόνο να την προσφέρουμε απεικόνιση αξία περιουσίας άλλο από κανένας, για παράδειγμα εμφάνιση: μπλοκ?.

 datalist εμφάνιση: μπλοκ?

Οι εμφανιζόμενες επιλογές δεν είναι ακόμη επιλεγμένα σε αυτό το σημείο, μόνο το πρόγραμμα περιήγησης κάνει τις επιλογές βρίσκει μέσα στο datalist.

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

Πρέπει επίσης να βρούμε έναν μηχανισμό όλα (στην παραπάνω εικόνα που εμφανίζεται κάτω από την αναπτυσσόμενη λίστα δεδομένων) επιλέξιμη στο οποιοδήποτε άλλο σημείο της διαδικασίας λήψης εισροών - όταν οι χρήστες θέλουν να ελέγξουν τις επιλογές πριν πληκτρολογήσουν κάτι ή ενώ έχουν ήδη βγάλει κάτι στο πεδίο εισαγωγής.

3. Φέρτε το Στοιχείο HTML.

Θα επιλέξουμε τη δεύτερη μέθοδο, καθώς είναι απλούστερη και επιτρέπεται να χρησιμοποιηθεί ως εφεδρικό μηχανισμό σε προγράμματα περιήγησης που δεν υποστηρίζουν το στοιχείο. Όταν ένα πρόγραμμα περιήγησης δεν μπορεί να εμφανίσει και να εμφανίσει το datalist, αυτό κάνει το HTML tag, ο κώδικας φαίνεται παρακάτω:

Datalist σε συνδυασμό με Προσθήκη του πολλαπλούς αποδίδουν στο ετικέτα, έτσι ώστε όταν ο χρήστης επιλέξει μια επιλογή από την αναπτυσσόμενη λίστα, η τιμή του θα εμφανιστεί μέσα στο τομέα. / * όταν ο χρήστης επιλέγει μια επιλογή από το DDL, γράψτε το στο πεδίο κειμένου * / select.addEventListener ('change', fill_input). συνάρτηση fill_input () input.value = επιλογές [this.selectedIndex] .value; hide_select (); Μειονεκτήματα Το κύριο μειονέκτημα αυτής της τεχνικής είναι το απουσία ενός άμεσου τρόπου για το στυλ του στοιχείο με CSS (η εμφάνιση του και