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