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

Сейчас мы реализуем автодополнение. Под этим термином понимается выпадающая подсказка при вводе текста в инпут. Давайте посмотрим на примере. Ниже я сделал инпут, в который можно ввести название страны. При этом, если ввести какие-то буквы, то под инпутом появится список стран, которые начинаются на введенную строку.

При желании можно, чтобы не вводить целиком имя страны, кликнуть мышкой на любую страну и она появится в инпуте. Для этого, в общем-то, автодополнение и нужно. В примере для простоты я сделал только три страны: Belarus, Belgium и Bulgaria. Введите в приведенный ниже инпут сначала символ 'В' английское, а потом '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;
}