Η ετικέτα datalist

Η ετικέτα datalist δημιουργεί αυτόματη συμπλήρωση για τα πεδία εισαγωγής input σε HTML φόρμα.

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

Για να συνδέσετε σε μια ετικέτα input αυτόματη συμπλήρωση, πρέπει να ορίσετε το χαρακτηριστικό list, στο οποίο θα πρέπει να καθορίσετε το χαρακτηριστικό id της ετικέτας datalist που θέλετε να συνδέσετε.

Οι επιλογές αποθηκεύονται σε ετικέτες option, οι οποίες με τη σειρά τους αποθηκεύονται στην ετικέτα datalist.

Παράδειγμα

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

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

Παράδειγμα

Ας προσθέσουμε τώρα στην ετικέτα option το χαρακτηριστικό value. Όταν επιλεγεί μια συγκεκριμένη χώρα στο συνδεδεμένο πεδίο εισαγωγής, δεν θα εισαχθεί η ονομασία της χώρας, αλλά το περιεχόμενο του χαρακτηριστικού value:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - a country of lakes and potatoes</option>
	<option value="Belgium">Belgium - a country where Belgians live</option>
	<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>

Παράδειγμα . Η επίδραση του χαρακτηριστικού autocomplete

Στη αναδυόμενη λίστα υποδείξεων επηρεάζει το χαρακτηριστικό autocomplete. Εάν είναι ενεργοποιημένο (και αυτή είναι η προεπιλεγμένη συμπεριφορά), τότε στις τιμές που ορίσατε στην ετικέτα datalist, θα προστεθούν και οι τιμές, που ο χρήστης έχει εισάγει στο παρελθόν σε αυτό το πεδίο.

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

Εάν αυτό σας εμποδίζει - απενεργοποιήστε το χαρακτηριστικό autocomplete, ορίζοντάς του την τιμή off.

Δοκιμάστε τις παραπάνω ενέργειες με το παράδειγμα:

<form action="">
	<input type="text" list="country" autocomplete="on">
	<datalist id="country">
		<option>Belarus</option>
		<option>Belgium</option>
		<option>Bulgaria</option>
		<input type="submit">
	</datalist>
</form>

Δείτε επίσης

το χαρακτηριστικό autocomplete,
που ορίζει αυτόματη συμπλήρωση στα πεδία της φόρμας