Auto-completare în JavaScript

Acum vom implementa auto-completarea. Acest termen se referă la un sugestie care apare la introducerea textului într-un câmp de introducere. Să ne uităm la un exemplu. Mai jos am făcut un câmp de introducere, în care se poate introduce numele unei țări. În același timp, dacă introduceți unele litere, sub câmp va apărea o listă de țări care încep cu șirul introdus.

Dacă doriți, puteți, fără a introduce întregul nume al țării, să faceți clic cu mouse-ul pe orice țară și ea va apărea în câmp. Pentru aceasta, în general, este nevoie de auto-completare. În exemplu, pentru simplitate, am făcut doar trei țări: Belarus, Belgium și Bulgaria. Introduceți în câmpul de mai jos întâi caracterul 'B' englezesc, apoi 'e' și urmăriți ce se va întâmpla:

Discuție

Să discutăm cum să rezolvăm problema. Este nevoie să facem un array cu numele țărilor. Al meu este acesta:

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

La introducerea textului în câmp, la fiecare caracter introdus, este necesar să parcurgem array-ul cu țări și să obținem țările care încep cu șirul introdus. Acest lucru este convenabil de făcut cu metodele filter și startsWith.

Cu filter puteți obține un array de țări care încep cu șirul introdus. Apoi este necesar să parcurgem acest array cu un ciclu și să umplem lista ul cu elemente li cu țări. Și așa trebuie făcut la fiecare caracter introdus, prealabil ștergând din ul elementele li create anterior.

Pentru comoditatea dvs., prezint markup-ul gata făcut:

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

Copiați pentru dvs. codurile HTML și CSS date. Implementați auto-completarea conform algoritmului descris.