Autocomplete dalam JavaScript

Sekarang kita akan mengimplementasikan autocomplete. Istilah ini mengacu pada petunjuk yang muncul saat mengetik teks di input. Mari kita lihat pada contoh. Di bawah ini saya telah membuat input, di mana Anda dapat memasukkan nama negara. Pada saat yang sama, jika Anda memasukkan beberapa huruf, di bawah input akan muncul daftar negara yang dimulai dengan string yang dimasukkan.

Jika diinginkan, agar tidak perlu mengetik seluruh nama negara, Anda dapat mengklik negara mana pun dengan mouse dan negara tersebut akan muncul di input. Untuk inilah, pada umumnya, autocomplete diperlukan. Dalam contoh untuk kesederhanaan saya hanya membuat tiga negara: Belarus, Belgium dan Bulgaria. Masukkan ke dalam input di bawah ini pertama karakter 'B' (dalam bahasa Inggris), lalu 'e' dan lihat apa yang terjadi:

Diskusi

Mari kita bahas bagaimana menyelesaikan masalahnya. Perlu membuat array dengan nama-nama negara. Saya memilikinya seperti ini:

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

Saat mengetik teks di input, pada setiap karakter yang dimasukkan, perlu memilah-milah array negara dan mendapatkan negara yang dimulai dengan string yang dimasukkan. Ini mudah dilakukan dengan metode filter dan startsWith.

Dengan filter Anda bisa mendapatkan array negara yang dimulai dengan string yang dimasukkan. Kemudian perlu mengulang array ini dengan loop dan mengisi list ul dengan li negara. Dan ini perlu dilakukan pada setiap input karakter, sebelumnya menghapus li yang dibuat sebelumnya dari ul.

Untuk kenyamanan Anda, saya sertakan markup jadi:

<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;
}

Salin kode HTML dan CSS yang diberikan ke Anda. Implementasikan autocomplete sesuai dengan algoritma yang dijelaskan.