HTML+JS: сделать select с поиском

Цена договорная
23 августа 2023, 15:39 • 21 отклик • 121 просмотр
Мне на страницу нужен новый элемент - select (или как его называют drop-down list) с поиском-фильтром (то есть чтобы можно было начать вводить в нем текст) + свободным вводом.

Я лучше пример приведу
Я хочу выпадающий список (например, городов). Чтобы юзер мог начать писать свой город и таким образом быстро его найти-выбрать. Но также, чтобы если его города нет в списке - он его мог просто ввести там же.

Вся страница (это что-то типа Google Forms) у меня генерится динамически, в тч все элементы на ней. Страница получает с сервера большой JSON, в котором описан каждый элемент, пример:
{
"header": "Возраст",
"type": "text",
"placeholder": "43",
"name": "age",
"valid": "number"
},
{
"header": "Из какого вы города",
"type": "select",
"name": "city",
"options": [
{ "value": "moscow", "label": "Москва" },
{ "value": "spb", "label": "Питер" }
],
"default": "spb"
}

после чего JS на странице создает все эти элементы.

Соотв, этот новый select (или как его назовем) надо будет также генерить из JS.
На странице НЕ используется bootstrap. Соотв, если вы сможете сделать без него - гут, если без него совсем тяжко-никак - ну окай (но я стараюсь сделать максимально легкую страницу).

Ценник предлагайте