JavaScript-ով ավտոլրացում

Այժմ մենք կիրականացնենք ավտոլրացում։ Այս տերմինը հասկացվում է որպես բացվող հուշում ինպուտում տեքստ մուտքագրելիս։ Եկեք նայենք օրինակով։ Ստորև ես պատրաստել եմ մի դաշտ, որի մեջ կարելի է մուտքագրել երկրի անունը։ Ընդ որում, եթե մուտքագրեք որոշ տառեր, ապա դաշտի տակ կհայտնվի այն երկրների ցուցակը, որոնք սկսվում են մուտքագրված տողից։

Ցանկության դեպքում հնարավոր է, որպեսզի չմուտքագրել ամբողջությամբ երկրի անունը, մկնիկով կտտացնել ցանկացած երկրի վրա և այն կհայտնվի դաշտում։ Դրա համար, ընդհանրապես, ավտոլրացումն էլ է անհրաժեշտ։ Օրինակում պարզության համար ես պատրաստել եմ միայն երեք երկիր՝ Belarus, Belgium և Bulgaria։ Մուտքագրեք ստորև բերված դաշտում սկզբում 'B' անգլերեն նշանը, ապա 'e' և նայեք, թե ինչ կլինի.

Քննարկում

Եկեք քննարկենք, թե ինչպես լուծել խնդիրը։ Պետք է պատրաստել երկրների անուններով զանգված։ Իմ մոտ այն ահա այսպիսին է.

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

Դաշտում տեքստ մուտքագրելիս անհրաժեշտ է յուրաքանչյուր նշանի մուտքագրման ընթացքում վերանայել երկրների զանգվածը և ստանալ այն երկրները, որոնք սկսվում են մուտքագրված տողից։ Սա հարմար է անել օգտագործելով filter և startsWith մեթոդները։

Օգտագործելով filter-ը կարելի է ստանալ մուտքագրված տողով սկսվող երկրների զանգվածը։ Այնուհետև անհրաժեշտ է վերանայել այս զանգվածը ցիկլով և լրացնել ul ցուցակը երկրներով լիստ-տարրերով։ Եվ այսպես պետք է անել յուրաքանչյուր նշանի մուտքագրման դեպքում, նախապես հեռացնելով ցուցակից նախկինում ստեղծված լիստ-տարրերը։

Ձեր հարմարության համար ներկայացնում եմ պատրաստի վերստը.

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

Պատճենեք ձեզ տրված HTML և CSS կոդերը։ Իրականացրեք ավտոլրացումը համաձայն նկարագրված ալգորիթմի։