JavaScript-da Avtoto‘ldirish

Hozir biz avtoto‘ldirishni amalga oshiramiz. Ushbu atama inputga matn kiritilayotganda paydo bo‘ladigan dropdown yordamchi ma'nosida tushuniladi. Keling, misol orgali ko'rib chiqaylik. Quyida men davlat nomini kiritish mumkin bo‘lgan input yaratdim. Agar ba'zi harflar kiritilsa, input ostiga kiritilgan satr bilan boshlanadigan davlatlar ro‘yxati paydo bo‘ladi.

Istansa, butun davlat nomini kiritmaslik uchun, sichqoncha bilan istalgan davlatni bosish mumkin va u inputda paydo bo‘ladi. Umuman olganda, avtoto‘ldirish shuning uchun kerak. Misolda soddalik uchun men faqat uchta davlatni yaratdim: Belarus, Belgium va Bulgaria. Quyidagi inputga avval 'B' (inglizcha) belgisini, keyin esa 'e' kiriting va nima bo‘lishini kuzating:

Muhokama

Keling, muammoni qanday hal qilishni muhokama qilaylik. Davlat nomlari bilan massiv yaratish kerak. Menda u shunday:

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

Inputga matn kiritilganda, har bir belgi kiritilishida davlatlar massivini qayta ishlash va kiritilgan satr bilan boshlanadigan davlatlarni olish kerak. Buni filter va startsWith usullari yordamida qilish qulay.

filter yordamida kiritilgan satr bilan boshlanadigan davlatlar massivini olish mumkin. Keyin ushbu massivni tsiklda qayta ishlash va ul ro‘yxatini davlatlar bilan li elementlariga to‘ldirish kerak. Va buni har bir belgi kiritilishida, ilgari yaratilgan li elementlarini ul dan olib tashlab, amalga oshirish kerak.

Sizning qulayligingiz uchun tayyor verstkani keltiraman:

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

Keltirilgan HTML va CSS kodlarini o‘zingizga nusxalang. Avtoto‘ldirishni tavsiflangan algoritm asosida amalga oshiring.