JavaScript-de awtodoldurma

Häzir biz awtodoldurma işleýäris. Bu termin bilen inputa tekst girizilende açylýan ýol görkezmeleri düşünilýär. Geliň mysal üçin seredeliň. Aşakda men bir input ýasadym, ona ýurtuň adyny girizmek bolýar. Şol bir wagtyň özünde, eger käbir harp girizilse, inputyň aşagynda başlanýan ýurtlaryň sanawy peýda bolar.

Isleseňiz, tutuşlygyna ýurtuň adyny girizmezden, çaltuşmak bilen islendik ýurda basyp onuň inputda peýda bolmagy mümkin. Umuman, bu üçin, awtodoldurma zerur. Mysalda ýönekeýlik üçin men diňe üç ýurt ýasadym: Belarus, Belgium we Bulgaria. Aşakdaky inputa ilki bilen 'B' iňlis harpy, soňra bolsa 'e' giriziň we näme bolýandygyna serediň:

Pikirlenme

Geliň, mesele nähili çözmelidigini pikir edeliň. Bizä ýurtlaryň adlary bilen massiw ýasamak gerek. Meniňki şeýle:

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

Inputa tekst girizilende, her bir harp girizilende ýurtlar bilen massiw gözden geçirmeli we başlanýan ýurtlary almaly. Bu ýagdaýda filter we startsWith usullary ulanyp amala aşyrmak amatly.

filter ulanyp, girizilen setir bilen başlanýan ýurtlaryň massiwini almak bolýar. Soňra bu massiwy aýlaw bilen gözden geçirmeli we ul sanawyny ýurtlar bilen doldurmaly. Şeýle her bir harp girizilende etmeli, öňünden uldan öňki ýasalan li elementlerini pozmaly.

Siziň amatlygyňyz üçin taýy görmelendirmäni getirýärin:

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

Goýlan HTML we CSS kodlaryny özüňize göçüriň. Görkezilen algoritme laýyklykda awtodoldurmany işlediň.