JavaScript-də Avtomatik Tamamlama

İndi biz avtomatik tamamlamanı həyata keçirəcəyik. Bu termin inputa mətn daxil edərkən açılan bir ipucu kimi başa düşülür. Gəlin bir nümunəyə baxaq. Aşağıda bir ölkə adını daxil edə biləcəyiniz bir input etdim. Bu zaman, əgər bəzi hərflər daxil etsəniz, inputun altında daxil edilmiş sətirlə başlayan ölkələrin siyahısı görünəcək.

İstəsəniz, tam ölkə adını daxil etməmək üçün siçanla hər hansı bir ölkəyə klikləyə bilərsiniz və o inputda görünəcək. Ümumiyyətlə, avtomatik tamamlama da buna üçün lazımdır. Nümunədə sadəlik üçün mən yalnız üç ölkə etdim: Belarus, Belgium və Bulgaria. Aşağıdakı inputa əvvəlcə 'B' ingilis hərfini, sonra isə 'e' daxil edin və nə baş verdiyinə baxın:

Müzakirə

Gəlin problemi necə həll edəcəyimizi müzakirə edək. Ölkə adları olan bir massiv etmək lazımdır. Mənimki belədir:

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

Inputa mətn daxil edərkən, hər simvolun daxil edilməsində ölkələr massivini gəzmək və daxil edilmiş sətirlə başlayan ölkələri əldə etmək lazımdır. Bunu filter və startsWith metodları ilə etmək rahatdır.

filter ilə daxil edilmiş sətirlə başlayan ölkələr massivini əldə edə bilərsiniz. Sonra bu massivi dövrə ilə gəzmək və ölkələr olan li elementləri ilə ul siyahısını doldurmaq lazımdır. Və bunu hər simvol daxil edildikdə, əvvəlcədən yaradılmış li elementlərini ul-dan silməklə etmək lazımdır.

Sizin rahatlığınız üçün hazır quruluşu təqdim edirəm:

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

Verilmiş HTML və CSS kodlarını özünüzə kopyalayın. Təsvir edilmiş alqoritmə uyğun olaraq avtomatik tamamlamanı həyata keçirin.