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

Ҳозир биз автодополнениени амалга оширамиз. Бу термин inputга матн киритилганда түшүвчи мазмунни англатади. Келинг, мисолда кўрамиз. Қуйида мен бир input яратдим, унга давлат номини киритиш мумкин. Агар каердир харф киритилса, input ostida киритилган сатрдан бошланадиган давлатлар рўйхати пайдо булади.

Исталганда, давлат номини тўлиқ киритмасдан, сичқонча билан бирор давлат устига босилса, у inputда пайдо булиши мумкин. Умуман олганда, автодополнение мана шу учун керак. Мисолда оддийлик учун мен факат учта давлатни қилдим: Belarus, Belgium ва Bulgaria. Қуйидаги inputга аввал 'В' инглизчасини, кейин 'e' киритиб кўринг ва нима булишини кузатинг:

Муҳокама

Келинг, масалани қандай ҳал қилишни муҳокама қилайлик. Давлат номлари билан массив яратиш керак. Меники мана бу:

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

Inputга матн киритилганда, ҳар бир белги киритилишида давлатлар массивини қайта ишлаш ва киритилган сатрдан бошланадиган давлатларни олиш керак. Буни filter ва startsWith усуллари ёрдамида қилиш қулай.

filter ёрдамида киритилган сатрдан бошланадиган давлатлар массивини олиш мумкин. Кейин, бу массивни цикл билан қайта ишлаш ва ul рўйхатини давлатлар билан толдириш керак. Ва буни ҳар бир белги киритилишида қилиш керak, олдинги яратилган лист элементларини ўчириб ташлаб.

Қулайлигингиз учун тайёр версткани келтираман:

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