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

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

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

← →
↑
en ru