JavaScript - Формирование строки адреса на основе предподсказок API Яндекс карт

Скрипт для формирования в поле input типового адреса объекта на основе преподсказок API Яндекс карт.

Случается так, что при разработке форм в некоторые поля клиенту требуется вносить адрес объекта. И что бы облегчить ввод, а так же соблюсти приемлимое форматирование, необходимо при наборе адреса организовать выпадающее окно с преподсказками адресов наиболее соответствуюших объектов на основе уже введённых данных. На базе API Яндекс карт очень просто организовать формирование адреса интересующего объекта для различных форм на сайте.

Для начала нужно подключить библиотеку "api-maps.yandex" от Яндекс карт в тело страницы между парными тегами head.

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

Не так давно при подключении к API Геосаджеста требуется в запросе передавать ключ. Его можно бесплатно получить в кабинете разработчика. Укажите его при подключении JS API в формате https://api-maps.yandex.ru/2.1/?lang=ru_RU&suggest_apikey=ваш ключ для Suggest API.

Затем необходимо создать поле ввода input.

<input type="text" name="address" id="address"/>

И наконец ниже разместить javascript код.

<script type="text/javascript">
ymaps.ready(init);
function init(){
	var suggestView=new ymaps.SuggestView('address');
	suggestView.events.add('select',function(event){
		var selected=event.get('item').value;
		ymaps.geocode(selected,{
			results:1
		}).then(function(res){
			return ymaps.geocode(res.geoObjects.get(0).geometry.getCoordinates(),{
				kind:'district',
				results:10
			}).then(function(res){
				var founded=res['metaData']['geocoder']['found'];
				$('label.suggest .description').html("");
				for(i=0;i<=founded-1;i++){
					var info=res.geoObjects.get(i).properties.getAll();
					console.log(info);
					var name=info['name'];
					if(name.search('район')!=-1){
						name=name.replace(' район','');
						console.log(name);
					}
				}
			});
		});
	});
//установка смещения блока подсказок по вертикали
document.getElementsByTagName('ymaps')[0].style.top = document.getElementsByTagName('ymaps')[0].style.top.match(/d+/)*1 + 5 + 'px';
//установка смещения блока подсказок по горизонтали
document.getElementsByTagName('ymaps')[0].style.left = document.getElementsByTagName('ymaps')[0].style.left.match(/d+/)*1 - 1 + 'px';
}
</script>

Для более точного позиционирования блока подсказок относительно поля ввода пришлось применить код корректирующий позицию блока по умолчанию выдаваемую api-maps.yandex. Последовательно:

— вычисляются текущие смещения от верха страницы и от левого края,

— из полученной строки вырезается подстрока "px",

— умножением на 1 переводится в числовое представление,

— прибавляется или вычитается необходимое значение смещения в px,

— снова добавляется строка "px",

— Полученные строки происваиваются свойству top и left атрибута style нетипичного тега результатов ymaps соответсвенно.

ТОП 10 случайных публикаций