Лучший способ вводить почтовые адреса и ФИО

24.03.2014

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

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

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

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

 

Заказать консультацию

 

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

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

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

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

Google Autocomplete (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 подсказки

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

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

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

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

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

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

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

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

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

Источник Хабр.

 

Заказать консультацию