JavaScript-те автодолықтау

Қазір біз автодолықтауды жүзеге асырамыз. Бұл термин енгізу өрісіне мәтін енгізу кезінде төменге қарай ашылатын кеңес ретінде түсініледі. Мысалға қарайық. Төменде мен ел атауын енгізуге болатын енгізу өрісін жасадым. Сонымен бірге, егер бірнеше әріп енгізесіз, онда енгізу өрісінің астында енгізілген жолдан басталатын елдер тізімі пайда болады.

Қалау бойынша, бүкіл ел атауын енгізбеу үшін, тінтуірмен кез келген елді басуға және оның енгізу өрісінде пайда болуына болады. Бұл, жалпы алғанда, автодолықтау үшін қажет. Мысалда қарапайымдылық үшін мен тек үш елді жасадым: Belarus, Belgium және Bulgaria. Төмендегі енгізу өрісіне алдымен 'B' ағылшынша таңбасын, содан кейін 'e' енгізіп, не болатынын көріңіз:

Талқылау

Есепті шешу әдісін талқылайық. Ел атаулары бар массив жасау керек. Менікі мынадай:

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

Енгізу өрісіне мәтін енгізу кезінде әрбір таңба енгізілген сайын елдер массивін қайта өңдеп, енгізілген жолдан басталатын елдерді алу керек. Бұны filter және startsWith әдістерінің көмегімен ыңғайлы орындауға болады.

filter көмегімен енгізілген жолдан басталатын елдер массивін алуға болады. Содан кейін осы массивті циклмен қайта өңдеп, елдермен ul тізімін ли элементтерімен толтыру керек. Және бұл әрбір таңба енгізілген сайын жасалуы керек, алдымен ul ішінде бұрын жасалған li элементтерін жою керек.

Сіздің ыңғайлылығыңыз үшін дайын верстканы келтіремін:

<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 кодтарын өзіңізге көшіріп алыңыз. Сипатталған алгоритм бойынша автодолықтауды жүзеге асырыңыз.