Сравнение сервисов для автодополнения адресов в форме

в 19:25, , рубрики: AngularJS, dadata, google maps api v3, google places api, javascript, usability, автодополнение адреса, Веб-разработка, кладр api, метки: , , , , , ,
Автодополнение адреса

На Хабре не раз поднимался вопрос автодополнения адресов в форме (раз, два, три).

Но вот и перед мной появилась задача реализовать такое автодополнение для небольшого интернет магазина. Критерии были такие:

  • Автодополнение адресов только Москвы
  • Автодополнение адреса одной строкой
  • Решение должно быть бесплатно (лимит запросов не менее 1000и в сутки)
  • Возможность подключить без дополнительных JS библиотек. (Я использую AngularJS Bootstrap-UI, в котором есть директива Typeahead, реализующая автодополнение формы)
  • 100%й uptime не обязателен

Но какой источник данных выбрать? Я выбрал целых четыре, и решил их сравнить: в одном углу ринга заморские Google Geocode и Google Autococomplete, а в другом отечественные КЛАДР в облаке и DaData подсказки.

DISCLAIMER: Автор никак не причастен к разработчикам ни одного из представленных сервисов.

Google Geocode (Google Maps API)

Google Maps API

В примерах к плагину Typeahead в документации к AngularJS Boostrap UI использован именно Google Geocode для автодополнения адреса. Так почему бы не попробовать, если готовый код уже есть?
Делаем get запрос к адресу http://maps.googleapis.com/maps/api/geocode/json с параметрами

params: {
    address: val,
    sensor: false,
    language: 'ru'
}

В ответ получаем json, парсим его, и вроде всё неплохо. Вот только нам надо ограничить область поиска только Москвой. Добавляем:

components: 'country:ru|administrative_area:Moscow'

к параметрам и получаем интересное поведение:

Автодополнение через Google Geocode

Какую ахинею не ввёл бы пользователь, Google предложит «Москва, Россия». К тому же, название улицы он предлагает только после ввода третьей-четвертой буквы, а до этого все те же «Москва, Россия».
Можно ограничить результаты с помощью параметра 'bounds' (координаты юго-западного и северо-восточного угла рамки, внутри которой производить геокодирование), но это нестрогое ограничение, поэтому результаты будут появляться и из других областей.

Конечно, не стоит ожидать чудес от сервиса, который вообще не предназначен для автодополнения адреса, но все же резюмирую:
✔ Надежный источник данных
✔ Удобный способ запроса/доставки данных (запрос обычным GETом, обратно — JSON)
✔ Возможно автодополнение одной строкой и даже разбивка полученных данных по компонентам (Страна, регион, город, улица, дом)

✖ Тяжело ограничить область поиска
✖ Сервис не предназначен для автодополнения

Попробовать (jsFiddle)

Google Autocomplete (Google Places API)

Google Places API

С Google Autocomplete у меня с самого начала не срослось: если запрашивать информацию обычным GETом, то гугловский сервер отвечает ошибкой CORS (Origin… is not allowed by Access-Control-Allow-Origin), а JSONP они не поддерживают после выхода третьей версией API. Некоторые говорят, что это сделано специально, чтобы в веб-разработке использовали их JS библиотеку. Конечно, можно еще сделать прокси, через который будут проходить данные, но я решил не заморачиваться ради такой мелочи.

Но для объективности сравнения, я все же попробовал Google Autocomplete через JS библиотеку. В итоге:
✔ Надежный источник данных
✔ Возможно автодополнение одной строкой
✔ Легко подключить (если использовать их JS библиотеку)

✖ Невозможно достучаться до API с фронтенда из-за CORS
✖ Нельзя строго ограничить область поиска до одного города (Можно строго ограничить только страну, или нестрого ограничить с помощью параметра 'bounds')

Попробовать (jsFiddle)

КЛАДР в облаке

Кладр в облаке

КЛАДР в облаке — отечественный сервис, который не раз упоминали на хабре.
Лично для меня он оказался неподходящим, т.к. не позволяет производить автодополнение одной строкой. Вы можете искать или регионы, или города, или улицы, или номера домов, но никак не всё это вместе в одной строке. То есть или придется разбивать одну форму на несколько, или искать только по названиям улиц только в Москве.
Мне это не подходит, но сильные и слабые стороны я всё же приведу:
✔ Авторитетный источник данных (КЛАДР)
✔ Постоянные обновления базы данных
✔ Российский разработчик
✔ Хороший API
✔ Открытый исходный код

✖ Невозможно автодополнение одной строкой

Попробовать можно здесь

DaData подсказки

DaData.ru

Я уже отчаялся найти сервис своей мечты и собирался вернуться к Google Geocode, как вспомнил про подсказки сервиса DaData.

Сразу перейду к сравнению:
✔ Возможно автодополнение одной строкой
✔ При начале ввода первых букв улицы, он сразу предлагает и номера домов на этой улице

КЛАДР в облаке

✔ Российский разработчик
✔ Разбивка полученных данных по компонентам (даже индекс и код КЛАДР и ОКАТО)

✖ Неизвестная база данных
✖ Бесплатным пользователям не гарантируется 100% uptime
✖ Неочевидный формат запроса данных (POST, а не GET)
✖ Скудный API

+ БОНУС: автодополнение еще и имён.

Но как организовать ограничение только по Москве? Я не придумал ничего лучше, как передавать 'Москва ' в начале параметра query. И это работает просто прекрасно:

  • При вводе улицы явно не в Москве ничего не находится
    КЛАДР в облаке
  • Даже, если пользователь введёт 'Москва' сам в начале запроса, всё равно всё находится
    КЛАДР в облаке

Попробовать (jsFiddle)

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

Автор: goooseman

Источник


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js