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

Азыр биз автодополнениени ишке ашырабыз. Бул термин инпутка текст киргизгенде түшүп чыгуучу нускаманы билдирет. Келгиле, мисал менен көрөлү. Төмөндө мен өлкөнүн атын киргизүүгө болгон инпут жасадым. Ошол эле учурда, эгерде кайсы бир тамгаларды киргизсеңиз, анда инпуттун астында киргизилген саптан башталган өлкөлөрдүн тизмеси пайда болот.

Каалоо боюнча, толугу менен өлкөнүн атын киргизбей, чычкан менен каалаган өлкөнү чыкылдатып, ал инпутка пайда болушу мүмкүн. Мунун үчүн, жалпысынан, автодополнение керек. Мисалда жөнөкөйлүк үчүн мен үч гана өлкө жасадым: Belarus, Belgium жана Bulgaria. Төмөндөгү инпутка алгач 'В' англисче тамгасын, андан кийин 'e' тамгасын киргизип, эмне болорун көрүңүз:

Талкуу

Келгиле, маселени кантип чечүү керектигин талкуулайлы. Өлкөлөрдүн аты менен массив жасаш керек. Менинки мындай:

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

Инпутка текст киргизгенде, ар бир символ киргизүүгө өлкөлөр менен массивди айланып өтүп, киргизилген саптан башталган өлкөлөрдү алуу керек. Бул filter жана startsWith методдору менен ыңгайлуу жасалат.

filter жардамы менен киргизилген саптан башталган өлкөлөрдүн массивин алууга болот. Андан кийин ушул массивди цикл менен айланып өтүп, өлкөлөр менен ul тизмесин ли элементтери менен толтуруш керек. Жана муну ар бир символ киргизүүдө жасаш керек, алдын ала улга мурда түзүлгөн ли элементтерин жок кылып.

Сиздин ыңгайыңыз үчүн даяр верстканы келтирем:

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

Жогоруда келтирилген HTML жана CSS коддорун өзүңүзгө көчүрүңүз. Сүрөттөлгөн алгоритм боюнча автодополнениени ишке ашырыңыз.