Інтеграція сервісу 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)

Час установки: кілька годин.