Автодопълнение на JavaScript

Сега ще реализираме автодопълнение. Под този термин се разпада падаща подсказка при въвеждане на текст в поле за въвеждане. Нека да разгледаме на примера. По-долу съм направил поле за въвеждане, в което може да се въведе име на държава. При това, ако се въведат някакви букви, под полето ще се появи списък с държави, които започват с въведения низ.

При желание може, за да не се въвежда изцяло името на държавата, да се кликне с мишката върху която и да е държава и тя ще се появи в полето. За това, общо взето, автодопълнението и е нужно. В примера за простота са направени само три държави: Belarus, Belgium и Bulgaria. Въведете в даденото по-долу поле за въвеждане първо символа 'B' на английски, а след това 'e' и вижте какво ще се случи:

Обсъждане

Нека да обсъдим как се решава задачата. Трябва да се направи масив с имената на държавите. При мен той е такъв:

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

При въвеждане на текст в полето за въвеждане, при всяко въвеждане на символ трябва да се претърсва масива с държави и да се получават държави, които започват с въведения низ. Това удобно се прави с помощта на методите filter и startsWith.

С помощта на filter може да се получи масив от държави, започващи с въведения низ. След това трябва да се премине през този масив с цикъл и да се попълни списъка ul с елементи li със страните. И това трябва да се прави при всеки въведен символ, като предварително се премахват от списъка по-рано създадените елементи li.

За ваше удобство прилагам готовия HTML и CSS:

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