Подсказки при вводе

API автодополнения для форм. Пользователь вводит 2-3 символа — видит релевантные варианты. Ответ за <50ms, готовые виджеты для React и vanilla JS.

Запрос

GET /v1/suggest/name?query=ива

Ответ

{
  "suggestions": [
    {"value": "Иванов", "count": 45000},
    {"value": "Иванова", "count": 42000},
    {"value": "Иван", "count": 38000},
    {"value": "Ивановский", "count": 1200}
  ]
}

Зачем нужно

Пользователи не любят заполнять формы:

Ввод адреса целиком — 30-60 секунд
Опечатки в каждой пятой форме
Брошенные корзины из-за сложного чекаута

Подсказки ускоряют ввод в 3-5 раз и снижают количество ошибок на 80%. Результат — выше конверсия, меньше возвратов.

Попробуйте сами

Примеры:

Введите текст для получения подсказок

Типы подсказок

ФИО

Подсказки фамилий, имён, отчеств. Справочник 150K+ записей, отсортированных по частотности.

/v1/suggest/name

Адреса

Подсказки из ФИАС. Регионы → города → улицы → дома. Фильтрация по геолокации.

/v1/suggest/address

Возможности

Быстрый ответ

<50ms (p95), оптимизировано для UX

Учёт популярности

Частые варианты выше в списке

Фильтрация по региону

Показывать адреса только нужного города

Геолокация

Приоритет адресов рядом с пользователем

Fuzzy-поиск

Находит даже с опечатками

Виджеты

Готовые компоненты для React и vanilla JS

Кастомизация

Настройка количества и формата подсказок

Debounce

Встроенная защита от лишних запросов

Примеры кода

curl

curl "https://api.humandata.ru/v1/suggest/name?query=ива" \
  -H "Authorization: Bearer YOUR_API_KEY"

JavaScript (с debounce)

// Debounce для оптимизации запросов
let timeout;
input.addEventListener("input", (e) => {
  clearTimeout(timeout);
  timeout = setTimeout(async () => {
    const query = e.target.value;
    if (query.length < 2) return;

    const response = await fetch(
      `https://api.humandata.ru/v1/suggest/name?query=${query}`,
      { headers: { "Authorization": "Bearer YOUR_API_KEY" } }
    );
    const data = await response.json();
    showSuggestions(data.suggestions);
  }, 150);
});

React (хук)

import { useState, useEffect } from "react";
import { useDebouncedValue } from "@/hooks/useDebounce";

function NameInput() {
  const [query, setQuery] = useState("");
  const [suggestions, setSuggestions] = useState([]);
  const debouncedQuery = useDebouncedValue(query, 150);

  useEffect(() => {
    if (debouncedQuery.length < 2) return;
    fetch(`/api/suggest/name?query=${debouncedQuery}`)
      .then(r => r.json())
      .then(data => setSuggestions(data.suggestions));
  }, [debouncedQuery]);

  return (/* ... */);
}

Готовые виджеты

Не хотите писать код? Используйте готовые компоненты:

React: npm-пакет @humandata/react-suggest
Vanilla JS: подключение через CDN, один скрипт
Стилизация: CSS-переменные для кастомизации

Документация по виджетам →

Частые вопросы

Сколько символов нужно для начала поиска?

Минимум 2 символа. При 1 символе слишком много вариантов, UX страдает.

Как настроить количество подсказок?

Параметр limit: /v1/suggest/name?query=ива&limit=5. По умолчанию 10, максимум 20.

Можно ли фильтровать адреса по региону?

Да. Параметр region_code: /v1/suggest/address?query=ленин&region_code=77 (Москва). Также работает геолокация по IP.

Как считаются запросы к suggest?

Каждый HTTP-запрос = 1 запрос к лимиту. Рекомендуем debounce 150-300ms для оптимизации. При 60 WPM и debounce 200ms — ~5 запросов на поле.

Попробуйте бесплатно

1000 запросов в месяц — без оплаты. Достаточно для тестирования формы на лендинге.

Создать аккаунт Документация API