Автодополнение дар JavaScript

Ҳозир мо автодополнение татбиқ мекунем. Зер ин истилоҳ рафтори падакунии тавсияро дар вақти ворид кардани матн дар вурудӣ мефаҳманд. Биёед намунаро бубинем. Дар поён ман як вурудии матн сохтам, ки дар он мумкин аст номи кишварро ворид кардан. Дар ин ҳолат, агар якчанд ҳарфро ворид кунед, таги вурудӣ рӯйхати кишварҳо пайдо мешавад, ки бо сатри воридшуда сар мешаванд.

Агар хоҳед, шумо метавонед, то номи кишварро пурра нанависед, бо муши компютер бар ягон кишвар клик кунед ва он дар вурудӣ пайдо мешавад. Барои ин, умуман, автодополнение лозим аст. Дар мисол барои соддагӣ ман фақат се кишвар сохтаам: Belarus, Belgium ва Bulgaria. Дар вурудии дар поён овардашуда аввал рамзи 'B'-и англисиро ворид кунед, сипас 'e' ворид кунед ва бубинед, чӣ рӯй медиҳад:

Муҳокима

Биёед дар бораи чӣ гуна ҳалли масъала сухан ронем. Лозим аст як массиви номҳои кишварҳо сохта шавад. Ман онро чунин сохтаам:

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

Дар вақти ворид кардани матн дар вурудӣ лозим аст, ки бо ворид кардани ҳар рамз массивро бо кишварҳо такрор карда, гирифтани кишварҳое, ки бо сатри воридшуда сар мешаванд. Инро бо истифода аз усулҳои filter ва startsWith осон анҷом додан мумкин аст.

Бо истифода аз filter шумо метавонед массиви кишварҳоеро, ки бо сатри воридшуда сар мешаванд, гиред. Сипас лозим аст ин массивро бо давр такрор карда, пур кардани рӯйхати ul бо элементҳои li кишварҳо. Ва ин тавр лозим аст барои ҳар ворид кардани рамз анҷом диҳад, пеш аз он элементҳои li-и қаблан сохташударо аз ул нест кардан.

Барои осонӣ дар кори шумо верстаи омодаро меорам:

<div id="parent">
	<input id="elem">
	<ul id="list"></ul>
</div>
маҷмӯи матн маҷмӯи матн маҷмӯи матн маҷмӯи матн маҷмӯи матн

#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 кодҳои дар боло овардашударо ба худ нусхабардорӣ кунед. Автодополнениеро мувофиқи алгоритми тавсифшуда татбиқ кунед.