- PVSM.RU - https://www.pvsm.ru -

На Хабре не раз поднимался вопрос автодополнения адресов в форме (раз [1], два [2], три [3]).
Но вот и перед мной появилась задача реализовать такое автодополнение для небольшого интернет магазина. Критерии были такие:
Но какой источник данных выбрать? Я выбрал целых четыре, и решил их сравнить: в одном углу ринга заморские Google Geocode [6] и Google Autococomplete [7], а в другом отечественные КЛАДР в облаке [8] и DaData подсказки [9].
DISCLAIMER: Автор никак не причастен к разработчикам ни одного из представленных сервисов.

В примерах к плагину Typeahead в документации к AngularJS Boostrap UI [5] использован именно Google Geocode [6] для автодополнения адреса. Так почему бы не попробовать, если готовый код уже есть?
Делаем get запрос к адресу http://maps.googleapis.com/maps/api/geocode/json [10] с параметрами
params: {
address: val,
sensor: false,
language: 'ru'
}
В ответ получаем json, парсим его, и вроде всё неплохо. Вот только нам надо ограничить область поиска только Москвой. Добавляем:
components: 'country:ru|administrative_area:Moscow'
к параметрам и получаем интересное поведение:

Какую ахинею не ввёл бы пользователь, Google предложит «Москва, Россия». К тому же, название улицы он предлагает только после ввода третьей-четвертой буквы, а до этого все те же «Москва, Россия».
Можно ограничить результаты с помощью параметра 'bounds' (координаты юго-западного и северо-восточного угла рамки, внутри которой производить геокодирование), но это нестрогое ограничение, поэтому результаты будут появляться и из других областей.
Конечно, не стоит ожидать чудес от сервиса, который вообще не предназначен для автодополнения адреса, но все же резюмирую:
✔ Надежный источник данных
✔ Удобный способ запроса/доставки данных (запрос обычным GETом, обратно — JSON)
✔ Возможно автодополнение одной строкой и даже разбивка полученных данных по компонентам (Страна, регион, город, улица, дом)
✖ Тяжело ограничить область поиска
✖ Сервис не предназначен для автодополнения

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

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

Я уже отчаялся найти сервис своей мечты и собирался вернуться к Google Geocode, как вспомнил про подсказки [9] сервиса DaData [15].
Сразу перейду к сравнению:
✔ Возможно автодополнение одной строкой
✔ При начале ввода первых букв улицы, он сразу предлагает и номера домов на этой улице

✔ Российский разработчик
✔ Разбивка полученных данных по компонентам (даже индекс и код КЛАДР и ОКАТО)
✖ Неизвестная база данных
✖ Бесплатным пользователям не гарантируется 100% uptime
✖ Неочевидный формат запроса данных (POST, а не GET)
✖ Скудный API
+ БОНУС: автодополнение еще и имён.
Но как организовать ограничение только по Москве? Я не придумал ничего лучше, как передавать 'Москва ' в начале параметра query. И это работает просто прекрасно:


В итоге лично я решил остановиться на последнем варианте, заодно и воспользоваться их автодополнением имён. Правда я считаю, что у каждого свои задачи, и для каждой конкретной задачи нужен свой инструмент.
Автор: goooseman
Источник [17]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/56556
Ссылки в тексте:
[1] раз: http://habrahabr.ru/post/192132/
[2] два: http://habrahabr.ru/post/194018/
[3] три: http://habrahabr.ru/company/hflabs/blog/207638/
[4] AngularJS: http://angularjs.org/
[5] Bootstrap-UI: http://angular-ui.github.io/bootstrap/
[6] Google Geocode: https://developers.google.com/maps/documentation/geocoding/?hl=ru
[7] Google Autococomplete: https://developers.google.com/places/documentation/autocomplete?hl=ru
[8] КЛАДР в облаке: http://kladr-api.ru/
[9] DaData подсказки: https://dadata.ru/suggestions/
[10] http://maps.googleapis.com/maps/api/geocode/json: http://maps.googleapis.com/maps/api/geocode/json
[11] Попробовать (jsFiddle): http://jsfiddle.net/goooseman/cxcCB/1/
[12] JS библиотеку: https://developers.google.com/maps/documentation/javascript/places?hl=ru#places_autocomplete
[13] Попробовать (jsFiddle): http://jsfiddle.net/goooseman/FzgL9/
[14] здесь: http://kladr-api.ru/examples/
[15] DaData: https://dadata.ru/
[16] Попробовать (jsFiddle): http://jsfiddle.net/goooseman/HbMEC/
[17] Источник: http://habrahabr.ru/post/214945/
Нажмите здесь для печати.