Аўтадапаўненне на 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 коды. Рэалізуйце аўтадапаўненне згодна з апісаным алгарытмам.