Automaattinen täydennys JavaScriptillä

Nyt toteutamme automaattisen täydennys. Tällä termillä tarkoitetaan ponnahdusikkunassa näkyvää vihjetä tekstin kirjoittamisen aikana syöttökenttään. Katsotaanpa esimerkkiä. Alla olen luonut syöttökentän, johon voi kirjoittaa maan nimen. Samalla, jos kirjoitat joitain kirjaimia, syöttökentän alle tulee näkyviin luettelo maista, jotka alkavat kirjoitetulla merkkijonolla.

Halutessa voidaan, jotta ei tarvitse kirjoittaa kokonaan maan nimeä, klikata hiirellä mitä tahansa maata ja se ilmestyy syöttökenttään. Tätä varten, yleisesti ottaen, automaattinen täydennys on tarpeen. Esimerkissä yksinkertaisuuden vuoksi olen luonut vain kolme maata: Belarus, Belgium ja Bulgaria. Kirjoita alla olevaan syöttökenttään ensin merkki 'B' englanniksi, sitten 'e' ja katso, mitä tapahtuu:

Keskustelu

Keskustellaan, kuinka tehtävä ratkaistaan. Tarvitsee tehdä taulukko maiden nimillä. Minulla se on tällainen:

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

Kun tekstiä kirjoitetaan syöttökenttään, tulee jokaisen merkin kirjoittamisen yhteydessä käydä läpi taulukko maista ja saada maat, jotka alkavat kirjoitetulla merkkijonolla. Tämä on kätevää tehdä käyttämällä menetelmiä filter ja startsWith.

filter:llä voidaan saada taulukko maista, jotka alkavat kirjoitetulla merkkijonolla. Sen jälkeen täytyy käydä läpi tämä taulukko silmukalla ja täyttää luettelo ul list elementeillä maista. Ja näin täytyy tehdä jokaisen merkin kirjoituksen yhteydessä, ennalta poistaen listasta aiemmin luodut list elementit.

Kätevääsi tarjoan valmiin verkkosivun rakenteen:

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

Kopioi itsellesi annetut HTML- ja CSS-koodit. Toteuta automaattinen täydennys kuvatun algoritmin mukaisesti.