вопросы пишите мне в телеграмм +375298176892
можно скачать офлайн версию сайта: code.mu old.code.mu

Автодополнение на 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 коды. Реализуйте автодополнение согласно описанному алгоритму.