Автодополнение адреса для сайта

Сегодня я в очередной раз просматривала "уютненький хабрахабрик" и наткнулась на статью "Автодополнение адреса для сайта / Хабрахабр".

"Блин... а мужики-то не знают" - подумала я, и вспомнила, что действительно не писала о том как я сделала автодополнение адреса средствами карт Яндекса!

Два года назад, я уже писала о том Как написать яваскрипт для обработки opensearch подсказок, но совершенно не указала о том, что этот же яваскрипт можно использовать для любого источника данных, что мне казалось очевидно, и что как раз для обработки поисковых подсказок яндекса я его и делала.

 В отличии от системы Кладр - у Яндекса есть несколько преимуществ:

• Он абсолютно совместим (по написанию имён улиц и т.п) с системой Яндекс.Карт =) - чего нельзя сказать про Кладр.
• Поиск сразу ранжируется по близости к нужному региону. (параметр ll в скрипте).
• Он ощутимо быстрее.
• Не нужны никакие api-key, им можно пользоваться бесплатно (что не запрещено - то разрешено).

В качестве источника данных я использую адрес:

http://suggest-maps.yandex.ru/suggest-geo?callback=show_suggestion&_=1302005670080&lang=ru-RU&ll=37.617671%2C55.755768&spn=2.399139%2C0.624969&highlight=1&fullpath=1&sep=1&search_type=all&part=часть адреса

Его знает любой, кто догадается поснифить траффик яндекс.карт. Я уже больше трёх лет жду когда же они сделают этот API открытым. То, что когда-нибудь так и будет я не сомневаюсь. Параметр callback я использую свой, так что в яндексе давно знают как и на каких сайтах их сервис используется. Пользуясь случаем передаю им спасибо за прекрасный сервис.

Готовый (почти) яваскрипт - тут http://kolomenka.ru/js/suggest_map_adress.js - пример действия в корзине этого сайта http://kolomenka.ru/cart/ - только сперва что-нибудь положить в корзину нужно.

Напомню что в код также нужно добавить некоторые стили:

/* opensearch js*/
#opensearch_input {font:11px Tahoma,sans-serif;/*padding-left:5px;*/}
#search_suggestion {z-index: 10; border: 1px solid gray; margin:0;list-style:none;padding:0; border-radius:3px;background:#fffffa;background:-moz-linear-gradient(top, #fffffa 0%,#f8f8f0 100%);}
#search_suggestion li {/*position:relative; */margin:0; padding:3px 90px 3px 7px; font:11px Tahoma,sans-serif;}
#search_suggestion i {position:absolute; right:0px;padding:1px 7px;}
#search_suggestion li.active {background:#fff0e8;text-decoration:underline;}
#search_suggestion li a {color: black; text-decoration:none;}
#search_suggestion li a:hover {color: #ff4000;text-decoration:underline;}
.item_price {background:transparent;border:none;}
/* opensearch js*/

Буду рада если кому-то поможет. На Хабре у меня аккаунта нет - но буду рада если вы перепишете эту статью там от своего имени и более подробно.