Outomatiese Voltooiing in JavaScript

Nou sal ons outomatiese voltooiing implementeer. Hierdie term verwys na 'n uitklapwyser wanneer teks in 'n invoerveld getik word. Kom ons kyk na 'n voorbeeld. Hieronder het ek 'n invoerveld gemaak waarin jy die naam van 'n land kan tik. As jy 'n paar letters intik, sal 'n lys van lande wat met die ingetikte string begin, onder die invoerveld verskyn.

As jy wil, kan jy, om nie die hele landnaam te hoef in te tik nie, met die muis op enige land klik en dit sal in die invoerveld verskyn. Dit is, in die algemeen, waarvoor outomatiese voltooiing nodig is. In die voorbeeld het ek vir eenvoud slegs drie lande gemaak: Belarus, Belgium en Bulgaria. Tik in die onderstaande invoerveld eers die simbool 'B' (Engels), en dan 'e' en kyk wat gebeur:

Bespreking

Kom ons bespreek hoe om die probleem op te los. Ons moet 'n skikking met landname maak. Myne is soos volg:

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

Wanneer teks in die invoerveld getik word, moet ons met die invoer van elke simbool die skikking met lande deurloop en die lande kry wat met die ingetikte string begin. Dit is gerieflik om te doen met die metodes filter en startsWith.

Met filter kan ons 'n skikking lande kry wat met die ingetikte string begin. Dan moet ons hierdie skikking met 'n lus deurloop en die lys ul met lyste items vul. En dit moet gedoen word met elke simboolinvoer, voorafgaande verwydering van die voorheen geskepte lyste items uit die ul.

Vir jou gerief gee ek die voltooide opmaak:

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

Kopieer die gegewe HTML- en CSS-kodes vir jouself. Implementeer outomatiese voltooiing volgens die beskryfde algoritme.