Интеграция сервиса DaData для подсказок адресов на сайте

Интеграция сервиса DaData для подсказок адресов на сайте

DaData — российский сервис стандартизации и обогащения данных. Главная функция для сайтов — подсказки при вводе адреса: пользователь начинает вводить улицу, а поле автоматически предлагает варианты с полной адресной структурой.

Подключение Suggestions API

DaData предоставляет готовый JavaScript-виджет:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/suggestions-jquery/dist/css/suggestions.min.css">
<script src="https://cdn.jsdelivr.net/npm/suggestions-jquery/dist/js/jquery.suggestions.min.js"></script>

<script>
$("#address").suggestions({
    token: "YOUR_API_KEY",
    type: "ADDRESS",
    onSelect: function(suggestion) {
        // suggestion.data содержит структурированные данные
        const data = suggestion.data;
        document.getElementById('city').value    = data.city || data.settlement;
        document.getElementById('street').value  = data.street;
        document.getElementById('house').value   = data.house;
        document.getElementById('flat').value    = data.flat;
        document.getElementById('postcode').value= data.postal_code;
        document.getElementById('region').value  = data.region_with_type;
    }
});
</script>

Без jQuery — React-компонент

import React, { useState, useCallback } from 'react';
import debounce from 'lodash/debounce';

function AddressSuggest({ onSelect }) {
    const [suggestions, setSuggestions] = useState([]);

    const fetchSuggestions = useCallback(
        debounce(async (query) => {
            if (query.length < 3) return;
            const res = await fetch('https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Token ${process.env.NEXT_PUBLIC_DADATA_KEY}`
                },
                body: JSON.stringify({ query, count: 5 })
            });
            const data = await res.json();
            setSuggestions(data.suggestions);
        }, 300),
        []
    );

    return (
        <div>
            <input onChange={e => fetchSuggestions(e.target.value)} placeholder="Начните вводить адрес" />
            {suggestions.map(s => (
                <div key={s.value} onClick={() => { onSelect(s); setSuggestions([]); }}>
                    {s.value}
                </div>
            ))}
        </div>
    );
}

Серверная стандартизация адреса

Помимо подсказок, DaData умеет стандартизировать адрес на сервере — привести произвольный текст к структурированному виду:

$response = Http::withHeaders([
    'Authorization' => 'Token ' . env('DADATA_API_KEY'),
    'X-Secret'      => env('DADATA_SECRET')
])->post('https://cleaner.dadata.ru/api/v1/clean/address', [
    'Москва Ленинский проспект 6 стр 3'
])->json();

$address = $response[0];
// $address['city'] = 'Москва'
// $address['street'] = 'Ленинский проспект'
// $address['house'] = '6', $address['block'] = '3'
// $address['geo_lat'], $address['geo_lon'] — координаты
// $address['qc'] — код качества (0 = точный адрес, 3 = требует уточнения)

Другие функции DaData

• Подсказки ФИО — type: "NAME", разбивает на имя/фамилию/отчество
• Подсказки организаций — type: "PARTY", поиск по ИНН или названию с обогащением из ЕГРЮЛ/ЕГРИП
• Банки — type: "BANK", поиск по БИК с автозаполнением реквизитов
• Email-стандартизация — исправляет опечатки в доменах (gmial.com → gmail.com)

Срок установки: несколько часов.