DL DT Хотел написать длинное вступительное слово с проклятиями в сторону составителей баз данных стран/городов, но потом все стёр. Ибо если кто-то сталкивался с данным вопросом, то он и так все это знает. А если не сталкивался, то попробую облегчить тебе жизнь, мой юный (или не очень) читатель.
В общем задача: Сделать форму выбора страны, региона, города и городского района. С подсказками и автокомлитом. Например вот такую:
Надо — так надо. Что понадобится для начала:
1) Подключаем Maps JavaScript API
2) Подключаем Jquery UI Autocomplete
3) Подключаем Бутстрап (на всякий случай)
4) Открываем блокнот (сарказм) и начинаем кодить
Это будет наша форма
<h4>Страна</h4> <div class="ui-widget"> <input class="form-control" id="country" type="text" placeholder="Начните вводить название страны"> </div> <h4>Регион</h4> <div class="ui-widget"> <input class="form-control" id="region" type="text" placeholder="Начните вводить название региона"> </div> <h4>Город</h4> <div class="ui-widget"> <input class="form-control" id="city" type="text" placeholder="Начните вводить название города"> </div> <h4>Район</h4> <div class="ui-widget"> <input class="form-control" id="district" type="text" placeholder="Начните вводить название городского района"> </div>
Ну и собственно скрипт. В комментариях поясняется — где что происходит
var log = function(e){//облегчаем себе жизнь
return(console.log(e));
}
var autocomplete_service = new google.maps.places.AutocompleteService();//подключаем гуглосервис
var counrty_val = ' ';//это сюда будем писать значения наших местоположений
var region_val = ' ';
var city_val = ' ';
var district_val = ' ';
var country_list = [];//массивы для всплывающих списков
var region_list = [];
var city_list = [];
var district_list = [];
$('#country').keyup(function(){
country_val = $('#country').val();//получаем буквы из нашего инпута для страны
if(country_val){
var request = {
input: country_val,
};
//log(request);
autocomplete_service.getPlacePredictions(request, google_addresses_callback);//делаем запрос в гугл
function google_addresses_callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var counter = 0;
$.each(results, function (index, result) {
//log(result);
function in_array(value, array) {
for (var i = 0; i < array.length; i++) {
if (array[i] == value){
country_list[counter] = result.description;//заполняем результатами из гугла список подсказок во всплывашке
counter++;
return true;
}
}
return false;
}
if (in_array("country", result.types)) {
//log(result);
}
});
}
else{
log('no result');
}
}
$("#country").autocomplete({//инициализируем Jquery UI Autocomplete
source: country_list,
focus: displayItem,
select: displayItem,
change: displayItem
});
function displayItem(event, ui) {//если автоподстановка произошла, забираем новое значение
if(ui.item){
country_val = ui.item.label;
}
}
}
});
//в принципе дальше по аналогии с небольшими изменениями
$('#region').keyup(function(){
region_val = country_val+' '+$('#region').val();//дописываем к значению инпута, значение предведущего инпута
var request = {
input: region_val,
};
//log(request);
autocomplete_service.getPlacePredictions(request, google_addresses_callback);
function google_addresses_callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var counter = 0;
$.each(results, function (index, result) {
//log(result);
function in_array(value, array) {
for (var i = 0; i < array.length; i++) {
if (array[i] == value){
var formated = result.description;
formated = formated.split(',');//отсекаем значение предведущего инпута. в подсказке оно нам не нужно
region_list[counter] = formated[0];
counter++;
return true;
}
}
return false;
}
if (in_array("administrative_area_level_1", result.types)) {
//log(result);
}
});
}
else{
log('no result')
}
}
$( "#region" ).autocomplete({
source: region_list,
focus: displayItem,
select: displayItem,
change: displayItem
});
function displayItem(event, ui) {
if(ui.item){
region_val = ui.item.label;
}
}
});
$('#city').keyup(function(){
city_val = region_val+' '+$('#city').val();
var request = {
input: city_val,
};
//log(request);
autocomplete_service.getPlacePredictions(request, google_addresses_callback);
function google_addresses_callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var counter = 0;
$.each(results, function (index, result) {
//log(result);
function in_array(value, array) {
for (var i = 0; i < array.length; i++) {
if (array[i] == value){
var formated = result.description;
formated = formated.split(',');
city_list[counter] = formated[0];
counter++;
return true;
}
}
return false;
}
if (in_array("locality", result.types)) {
//log(result);
}
});
}
else{
log('no result')
}
}
$( "#city" ).autocomplete({
source: city_list,
focus: displayItem,
select: displayItem,
change: displayItem
});
function displayItem(event, ui) {
if(ui.item){
city_val = ui.item.label;
}
}
});
$('#district').keyup(function(){
district_val = city_val+' '+$('#district').val();
var request = {
input: district_val,
};
//log(request);
autocomplete_service.getPlacePredictions(request, google_addresses_callback);
function google_addresses_callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var counter = 0;
$.each(results, function (index, result) {
//log(result);
function in_array(value, array) {
for (var i = 0; i < array.length; i++) {
if (array[i] == value){
var formated = result.description;
formated = formated.split(',');
district_list[counter] = formated[0];
counter++;
return true;
}
}
return false;
}
if (in_array("sublocality_level_2", result.types)) {
//log(result);
}
});
}
else{
log('no result')
}
}
$( "#district" ).autocomplete({
source: district_list,
focus: displayItem,
select: displayItem,
change: displayItem
});
function displayItem(event, ui) {
if(ui.item){
district_val = ui.item.label;
}
}
});
Вы великолепны!
vVhv2eyKO