DaData API + JavaScript: добавляем умные подсказки адреса в форму

DaData можно освоить на одном небольшом проекте, если сразу видеть вход, действие и результат. DaData возвращает не просто строку, а нормализованный адрес с индексом, ФИАС и координатами, поэтому форма получает проверяемую структуру. Ниже вы соберёте работающий пример и проверите обычный и граничный сценарии.

Запрос на каждую клавишу создаёт гонку ответов, токен легко раскрыть, а сохранение только видимого текста теряет идентификаторы адреса. Поэтому отделим настройку, входные данные, основное действие и проверку. В этой статье вы соберёте поле адреса с debounce, списком подсказок и сохранением выбранного объекта. Проверка: после трёх символов появляется список, быстрый ввод не показывает старый ответ, выбор заполняет индекс и fias_id.

Как устроен учебный проект DaData

DaData разделяет подготовку, основное действие, проверку ответа и сохранение результата. Держите ввод, логику и отображение раздельно: тогда каждый этап можно проверить отдельно.

Контрольные точки: ввод, запрос, гонка и выбор. Следующий шаг начинается после совпадения с ожидаемым результатом.

От входных данных до видимого результата. Сначала проверяется вход, затем действие и только потом интерфейс.

Собираем рабочий пример шаг за шагом

Материал сверялся с официальной документацией сервиса 21 октября 2026 года. Для учебного локального примера задайте токен отдельно. В публичном приложении используйте серверный proxy и ограничивайте доступ. Проверьте текущую папку через pwd или Get-Location. Вставьте пример целиком, выполните один раз, затем разбирайте по частям.

const input = document.querySelector('#address')
const list = document.querySelector('#suggestions')
let timer
let controller

input.addEventListener('input', () => {
  clearTimeout(timer)
  timer = setTimeout(() => suggest(input.value.trim()), 300)
})

async function suggest(query) {
  if (query.length < 3) { list.replaceChildren(); return }
  controller?.abort()
  controller = new AbortController()
  try {
    const response = await fetch('/api/address-suggest', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({ query, count: 5 }),
      signal: controller.signal,
    })
    if (!response.ok) throw new Error('Не удалось получить подсказки')
    const { suggestions } = await response.json()
    list.replaceChildren(...suggestions.map(makeOption))
  } catch (error) {
    if (error.name !== 'AbortError') list.textContent = error.message
  }
}

function makeOption(item) {
  const button = document.createElement('button')
  button.type = 'button'
  button.textContent = item.value
  button.onclick = () => { input.value = item.value; input.dataset.fiasId = item.data.fias_id || ''; list.replaceChildren() }
  return button
}

Код держит подготовку отдельно от внешнего действия, поэтому ошибку можно найти на конкретном шаге. Найдите в примере вход, проверку и место формирования результата.

Что отличает устойчивый проект от случайного запуска. Явные границы делают ошибку локальной и понятной.

Что происходит внутри и почему это работает

Debounce сокращает число запросов, AbortController решает гонку, а отдельный выбранный объект отличает подтверждённый адрес от произвольного текста. Логику держите отдельно от вывода: функция получает аргумент и возвращает значение, а интерфейс показывает его. Секреты и персональные данные не должны попадать в репозиторий, журнал или публичный скриншот.

Пользователь может отредактировать поле после выбора. При новом input сбрасывайте сохранённый fias_id и считайте адрес неподтверждённым, пока он снова не выбрал подсказку. Не прячьте поток в одном обработчике: сохраните вход, проверьте его, вызовите операцию и только затем обновите интерфейс.

Проверяем проект и добавляем свою функцию

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

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

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

Что запомнить и куда двигаться дальше

В production вынесите токен на сервер, поставьте лимит запросов и не считайте свободный текст подтверждённым адресом. Для закрепления откройте в статье про Fetch API, в проекте с Яндекс Картами и в проверке поля формы.

Как изучить тему в Кодике

Сначала разберите входные данные и один успешный вызов, затем изучайте дополнительные параметры. Сначала восстановите главную функцию и проверьте её на трёх значениях.

Перепишите ключевую функцию по памяти и проверьте её на корректном, пустом и ошибочном вводе. Базовый синтаксис закрепите через курс JavaScript.

Что получится в итоге

Финальный экран показывает результат, состояние запроса и понятное сообщение об ошибке без раскрытия секретов.