JavaScript'te Otomatik Tamamlama

Şimdi otomatik tamamlamayı uygulayacağız. Bu terim, bir input alanına metin girilirken açılır bir ipucunun görünmesi olarak anlaşılır. Bir örnek üzerinde görelim. Aşağıya, içine bir ülke adı yazılabilecek bir input alanı yaptım. Ayrıca, bazı harfler girildiğinde, inputun altında girilen dize ile başlayan ülkelerin bir listesi görünecek.

İstenirse, ülke adının tamamını yazmamak için, fareyle herhangi bir ülkeye tıklanabilir ve ülke input alanında belirecektir. Otomatik tamamlama genel olarak bunun içindir. Örnekte basitlik için sadece üç ülke yaptım: Belarus, Belçika ve Bulgaristan. Aşağıdaki input alanına önce 'B' İngilizce karakterini, sonra 'e' karakterini girin ve ne olacağını görün:

Tartışma

Şimdi sorunu nasıl çözeceğimizi tartışalım. Ülke adlarını içeren bir dizi oluşturulmalı. Benimki şu şekilde:

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

Input alanına metin girilirken, her bir karakter girildiğinde ülkeler dizisini tarama yapmalı ve girilen dize ile başlayan ülkeleri elde etmeliyiz. Bunu filter ve startsWith yöntemleri ile yapmak uygundur.

filter ile girilen dize ile başlayan ülkelerin dizisini elde edebiliriz. Sonra bu dizi üzerinde bir döngü ile geçip ul listesini ülkeleri içeren li öğeleri ile doldurmalıyız. Ve bu işlemi her karakter girişinde, önceden ul içinde oluşturulmuş li öğelerini silerek yapmalıyız.

Sizin kolaylığınız için hazır HTML ve CSS kodunu veriyorum:

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

Verilen HTML ve CSS kodlarını kendinize kopyalayın. Açıklanan algoritmaya göre otomatik tamamlamayı gerçekleştirin.