Да, с помощью Yandex API можно реализовать автодополнение (autocomplete) городов в JavaScript. Yandex предоставляет API под названием Yandex.Maps, которое обеспечивает доступ к своим данным, включая геолокацию и автодополнение.
Чтобы использовать Yandex.Maps API для автодополнения городов, вам понадобится ключ API, который можно получить на сайте Yandex для разработчиков. Этот ключ будет использоваться для аутентификации запросов к API.
После получения ключа API вы можете начать реализацию автодополнения городов. Вот пример, как это можно сделать:
1. Создайте HTML форму с полем ввода для города:
<form> <input type="text" id="city-input" placeholder="Введите город"> </form>
2. В JavaScript определите обработчик события ввода для поля ввода, который будет вызывать функцию для автодополнения:
const input = document.getElementById('city-input'); input.addEventListener('input', autocompleteCities);
3. В функции autocompleteCities
будет происходить отправка запроса к Yandex.Maps API для получения списка автодополнений:
function autocompleteCities() { const inputText = input.value; const url = `https://suggest-maps.yandex.ru/suggest-geo?part=${inputText}&lang=ru_RU`; // Отправляем GET-запрос к API fetch(url) .then(response => response.json()) .then(data => { const suggestions = data.map(item => item.text); // Выбираем только текстовые предложения из ответа API и отображаем их displaySuggestions(suggestions); }) .catch(error => { console.error('Ошибка:', error); }); }
4. Функция displaySuggestions
будет отображать список автодополнений городов под полем ввода:
function displaySuggestions(suggestions) { const suggestionsList = document.getElementById('suggestions-list'); suggestionsList.innerHTML = ''; suggestions.forEach(suggestion => { const listItem = document.createElement('li'); listItem.textContent = suggestion; suggestionsList.appendChild(listItem); }); }
5. Наконец, добавьте элемент <ul>
для отображения списка автодополнений под полем ввода:
<ul id="suggestions-list"></ul>
В результате выполнения этих шагов, при вводе текста в поле, функция autocompleteCities
будет вызываться и отправлять запросы к Yandex.Maps API. В ответ будет получен список автодополнений, который будет отображен в виде списка под полем ввода.
Это только пример реализации автодополнения городов с помощью Yandex.Maps API в JavaScript. Вы можете доработать его, добавив обработку событий выбора автодополнений и другие функции по своему усмотрению.