Αυτόματη Συμπλήρωση σε JavaScript

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

Εάν θέλετε, για να μην χρειαστεί να εισαγάγετε ολόκληρο το όνομα της χώρας, μπορείτε να κάνετε κλικ με το ποντίκι σε οποιαδήποτε χώρα και αυτή θα εμφανιστεί στο πεδίο εισαγωγής. Για αυτόν, γενικά, χρειάζεται η αυτόματη συμπλήρωση. Στο παράδειγμα, για απλότητα, έχω βάλει μόνο τρεις χώρες: Belarus, Belgium και Bulgaria. Εισαγάγετε στο παρακάτω πεδίο εισαγωγής πρώτα τον χαρακτήρα 'B' (αγγλικό), και μετά 'e' και δείτε τι θα συμβεί:

Συζήτηση

Ας συζητήσουμε πώς να λύσετε το πρόβλημα. Πρέπει να φτιάξετε έναν πίνακα με τα ονόματα των χωρών. Ο δικός μου είναι ο εξής:

let arr = ['Belarus', 'Belgium', 'Bulgaria'];

Κατά την εισαγωγή κειμένου στο πεδίο εισαγωγής, κατά την πληκτρολόγηση κάθε χαρακτήρα, πρέπει να διατρέχετε τον πίνακα με τις χώρες και να λαμβάνετε τις χώρες που ξεκινούν με την εισαγμένη συμβολοσειρά. Αυτό είναι βολικό να γίνει χρησιμοποιώντας τις μεθόδους filter και startsWith.

Χρησιμοποιώντας το filter μπορείτε να πάρετε έναν πίνακα χωρών που ξεκινούν με την εισαγμένη συμβολοσειρά. Στη συνέχεια πρέπει να διατρέξετε αυτόν τον πίνακα με έναν βρόχο και να γεμίσετε τη λίστα ul με στοιχεία λίστας (li) με τις χώρες. Και αυτό πρέπει να γίνεται για κάθε εισαγόμενο χαρακτήρα, προηγουμένως διαγράφοντας από τη λίστα ul τα προηγουμένως δημιουργημένα στοιχεία li.

Για τη δική σας ευκολία, παραθέτω το έτοιμο σκελετό HTML και CSS:

<div id="parent">
	<input id="elem">
	<ul id="list"></ul>
</div>
text text text text text

#parent {
	position: relative;
}
#elem {
	padding: 5px;
	font-size: 18px;
}

#parent ul {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: white;
}
#parent li {
	border: 1px solid gray;
	font-size: 18px;
	padding: 5px;
}
#parent li:hover {
	border: 1px solid black;
	cursor: pointer;
}

Αντιγράψτε στον εαυτό σας τους παραπάνω κώδικες HTML και CSS. Υλοποιήστε την αυτόματη συμπλήρωση σύμφωνα με τον περιγραφόμενο αλγόριθμο.