Pelengkapan Automatik dalam JavaScript

Sekarang kita akan melaksanakan pelengkapan automatik. Istilah ini merujuk kepada petunjuk terjuntai apabila teks dimasukkan ke dalam input. Mari kita lihat contohnya. Di bawah ini saya telah membuat satu input, di mana anda boleh memasukkan nama negara. Pada masa yang sama, jika beberapa huruf dimasukkan, senarai negara yang bermula dengan rentetan yang dimasukkan akan muncul di bawah input.

Jika mahu, anda boleh, tanpa perlu memasukkan keseluruhan nama negara, klik dengan tetikus pada mana-mana negara dan ia akan muncul dalam input. Secara umumnya, untuk inilah pelengkapan automatik diperlukan. Dalam contoh, untuk kesederhanaan, saya hanya meletakkan tiga negara: Belarus, Belgium dan Bulgaria. Masukkan ke dalam input di bawah pertama aksara 'B' (Bahasa Inggeris), kemudian 'e' dan lihat apa yang akan berlaku:

Perbincangan

Mari kita bincangkan cara menyelesaikan masalah. Perlu membuat array dengan nama negara. Saya mempunyai array seperti ini:

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

Apabila teks dimasukkan ke dalam input, bagi setiap aksara yang dimasukkan, array negara perlu disemak dan negara yang bermula dengan rentetan yang dimasukkan perlu diperoleh. Ini mudah dilakukan dengan kaedah filter dan startsWith.

Dengan filter, anda boleh mendapatkan array negara yang bermula dengan rentetan yang dimasukkan. Kemudian array ini perlu dilalui dengan gelung dan senarai ul diisi dengan elemen li negara. Dan ini perlu dilakukan bagi setiap aksara yang dimasukkan, dengan terlebih dahulu membuang elemen li yang dicipta sebelum ini daripada senarai ul.

Untuk kemudahan anda, saya sediakan susun atur siap:

<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 kod HTML dan CSS yang diberikan kepada anda. Laksanakan pelengkapan automatik mengikut algoritma yang diterangkan.