Automatinis užpildymas JavaScript

Dabar mes įgyvendinsime automatinį užpildymą. Šiuo terminu suprantamas išskleidžiamasis užuominos sąrašas įvedant tekstą į įvesties lauką. Pažiūrėkime pavyzdžiu. Žemiau aš sukūriau įvesties lauką, į kurį galima įvesti šalies pavadinimą. Tuo tarpu, jei įvesti tam tikras raides, po įvesties lauku pasirodys šalių sąrašas, kurios prasideda įvesta eilute.

Norint galima, kad nereikėtų visiškai įvesti šalies pavadinimo, pelės paspaudimu ant bet kurios šalies ir ji pasirodys įvesties lauke. Tam, tiesą sakant, ir reikalingas automatinis užpildymas. Pavyzdyje paprastumo dėlei aš padariau tik tris šalis: Belarus, Belgium ir Bulgaria. Įveskite į žemiau pateiktą įvesties lauką pirma simbolį 'B' anglišką, o paskui 'e' ir pažiūrėkite, kas atsitiks:

Aptarimas

Aptarkime, kaip išspręsti užduotį. Reikia sukurti masyvą su šalių pavadinimais. Mano jis toks:

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

Įvedant tekstą į įvesties lauką, reikia kiekvieno simbolio įvedimo metu perrinkti masyvą su šalimis ir gauti šalis, kurios prasideda įvesta eilute. Tai patogu daryti naudojant metodus filter ir startsWith.

Naudojant filter galima gauti masyvą šalių, prasidedančių įvesta eilute. Tada reikia pereiti šį masyvą ciklu ir užpildyti sąrašą ul elementais li su šalimis. Ir taip reikia daryti su kiekvienu įvestu simboliu, iš anksto pašalinant iš ul anksčiau sukurtus li elementus.

Jūsų patogumui pateikiu paruoštą žymėjimą:

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

Nukopijuokite sau pateiktus HTML ir CSS kodus. Įgyvendinkite automatinį užpildymą pagal aprašytą algoritmą.