Autoplotësim në JavaScript

Tani do të implementojmë autoplotësim. Me këtë term kuptohet një sugjerim në formë liste poshtë gjatë shkrimit të tekstit në një input. Le të shohim në një shembull. Më poshtë kam krijuar një input, në të cilin mund të shkruhet emri i një vendi. Në të njëjtën kohë, nëse shkruhen disa shkronja, poshtë input-it do të shfaqet një listë e vendeve, të cilat fillojnë me stringun e shkruar.

Nëse dëshironi, mundeni, për të mos shkruar në tërësi emrin e vendit, të klikoni me miun në cilindo vend dhe ai do të shfaqet në input. Për këtë, në përgjithësi, shërben autoplotësimi. Në shembull për thjeshtësi kam përfshirë vetëm tre vende: Belarus, Belgium dhe Bulgaria. Shkruani në input-in e mëposhtëm fillimisht karakterin 'B' angleze, e pastaj 'e' dhe shikoni çfarë ndodh:

Diskutim

Le të diskutojmë se si ta zgjidhim këtë detyrë. Duhet të krijohet një array me emrat e vendeve. I imi është kështu:

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

Gjatë shkrimit të tekstit në input, me çdo shkrim karakteri, duhet të përsëritet array-i me vendet dhe të merren vendet, të cilat fillojnë me stringun e shkruar. Kjo bëhet lehtësisht me metodat filter dhe startsWith.

Me filter mund të merret një array i vendeve që fillojnë me stringun e shkruar. Pastaj duhet të përsëritet ky array me cikël dhe të plotësohet lista ul me elementët li me vendet. Dhe kjo duhet të bëhet me çdo shkrim karakteri, duke fshirë paraprakisht nga ul elementët li të krijuar më parë.

Për lehtësinë tuaj, paraqes strukturën HTML të gatshme:

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

Kopjoni kodet e paraqitura HTML dhe CSS. Implementoni autoplotësim sipas algoritmit të përshkruar.