Аўтадапаўненне на JavaScript

Зараз мы рэалізуем аўтадапаўненне. Пад гэтым тэрмінам разумеецца выпадальная падказка пры ўводзе тэксту ў інпут. Давайце паглядзім на прыкладзе. Ніжэй я зрабіў інпут, у які можна ўвесці назву краіны. Пры гэтым, калі ўвесці якія-небудзь літары, то пад інпутам з'явіцца спіс краін, якія пачынаюцца на ўведзены радок.

Пры жаданні можна, каб не ўводзіць цалкам назву краіны, клікнуць мышшу на любую краіну і яна з'явіцца ў інпуце. Для гэтага, наогул кажучы, аўтадапаўненне і патрэбнае. У прыкладзе для прастаты я зрабіў толькі тры краіны: Belarus, Belgium і Bulgaria. Увядзіце ў прыведзены ніжэй інпут спачатку сімвал 'B' англійскае, а потым 'e' і паглядзіце, што будзе:

Абмеркаванне

Давайце абмяркуем, як вырашаць задачу. Трэба зрабіць масіў з назвамі краін. У мяне ён вось такі:

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

Пры ўводзе тэксту ў інпут трэба па ўводзе кожнага сімвала перабіраць масіў з краінамі і атрымліваць краіны, якія пачынаюцца на ўведзены радок. Гэта зручна рабіць з дапамогай метадаў filter і startsWith.

З дапамогай filter можна атрымаць масіў краін, якія пачынаюцца з уведзенага радка. Затым трэба перабраць гэты масіў цыклам і запоўніць спіс ul лішкамі з краінамі. І так трэба рабіць на кожны ўвод сімвала, папярэдне выдаляючы з улькі раней створаныя лішкі.

Для вашай выгоды прыводжу гатовую верстку:

html<div id="parent">
  <input id="elem">
  <ul id="list"></ul>
</div>
text text text text text

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