# Реализация автодополения на JavaScript

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

## Исходники кода

`#parent { position: relative; } #parent ul { position: absolute; margin: 0; padding: 0; list-style-type: none; background-color: white; } #parent li { border: 1px solid gray; padding: 3px; } #parent li:hover { border: 1px solid black; cursor: pointer; }` `<div id="parent"> <input id="elem"> <!-- <ul> <li>Belarus</li> <li>Belgium</li> <li>Bulgaria</li> </ul> --> </div> text text text text text` `let arr = ['Belarus', 'Belgium', 'Bulgaria', 'Russia']; let elem = document.querySelector('#elem'); let parent = document.querySelector('#parent'); let ul = document.createElement('ul'); parent.appendChild(ul); elem.addEventListener('input', function() { ul.innerHTML = ''; if (this.value !== '') { let matches = arr.filter(item => item.startsWith(this.value)); if (matches.length > 0) { for (let match of matches) { let li = document.createElement('li'); li.innerHTML = match; ul.appendChild(li); li.addEventListener('click', function() { elem.value = this.innerHTML; ul.innerHTML = ''; }); } } } });`
←→
↑