Ничего сложного нет, если есть база адресов подключенных ! Такую выборку реализовали
Вот так на коленке это все решается. В <input> можно писать значение, и он выведет подсказки либо же сразу выбрать из подсказки. По мере заполнения форма сама будет подбирать улицы и их дома.
let data = [{
city: "Алматы",
data: [{
street: "Абая",
houses: [1, 34, 65, 87]
},
{
street: "Сатпаева",
houses: [2, 4, 5, 7]
},
]
},
{
city: "Есик",
data: [{
street: "Спортивная",
houses: [33, 3, 5, 7]
},
{
street: "Сатпаева",
houses: [25, 43, 54, 75]
},
]
},
{
city: "Шымкент",
data: [{
street: "Какой-то город",
houses: [343, 35, 52, 7]
},
{
street: "Еще один город",
houses: [245, 43, 54, 75]
},
]
}
];
let path = {
city: null,
street: null,
house: null
}
$("body").append("<datalist id='citys'>" + data.map(item => "<option>" + item.city + "</option>").join("") + "</datalist>");
$("input[name='city']").on("change", (e) => {
$("datalist[id='streets']").remove();
$("datalist[id='houses']").remove();
$("input[name='street']").val("");
$("input[name='house']").val("");
let elem = $(e.currentTarget);
if (elem.val()) {
let cityIndex = data.findIndex(item => item.city === elem.val());
path.city = cityIndex;
$("body").append("<datalist id='streets'>" + data[cityIndex].data.map(item => "<option>" + item.street + "</option>").join("") + "</datalist>");
}
});
$("input[name='street']").on("change", (e) => {
$("datalist[id='houses']").remove();
$("input[name='house']").val("");
let elem = $(e.currentTarget);
if (elem.val()) {
let streetIndex = data[path.city].data.findIndex(item => item.street === elem.val());
path.street = streetIndex;
$("body").append("<datalist id='houses'>" + data[path.city].data[streetIndex].houses.map(item => "<option>" + item + "</option>").join("") + "</datalist>");
}
});