Autokomplettering i JavaScript

Nu ska vi implementera autokomplettering. Denna term avser en rullande hjälptext när text skrivs in i ett inputfält. Låt oss titta på ett exempel. Nedan har jag skapat ett inputfält där man kan skriva in ett landsnamn. Om man skriver in några bokstäver kommer en lista över länder som börjar på den inmatade strängen att visas under inputfältet.

Om man vill, för att slippa skriva landsnamnet i sin helhet, kan man klicka med musen på vilket land som helst och det kommer att dyka upp i inputfältet. Det är i allmänhet det autokomplettering används för. I exemplet har jag för enkelhetens skull bara använt tre länder: Belarus, Belgium och Bulgaria. Skriv in i inputfältet nedan först tecknet 'B' (engelska), och sedan 'e' och se vad som händer:

Diskussion

Låt oss diskutera hur uppgiften ska lösas. Man behöver skapa en array med landsnamn. Min ser ut så här:

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

När text skrivs in i inputfältet behöver man för varje inmatat tecken gå igenom arrayen med länder och få ut de länder som börjar på den inmatade strängen. Detta är lämpligt att göra med metoderna filter och startsWith.

Med filter kan man få en array med länder som börjar på den inmatade strängen. Därefter behöver man gå igenom denna array med en loop och fylla listan ul med li-element med länderna. Och detta behöver göras för varje inmatat tecken, efter att man först tagit bort de tidigare skapade li-elementen från ul-listan.

För din bekvämlighet återger jag den färdiga HTML-strukturen:

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

Kopiera de angivna HTML- och CSS-koderna till dig. Implementera autokomplettering enligt den beskrivna algoritmen.