Помогите пожалуйста с блоком для выбора [закрыт]

123

09 июля 2019, 06:50

У меня на сайте есть блок проверить возможность подключения https://internet-kz.info/ Есть список всех городов, улиц, и номеров домов которые подключены к Билайн в Казахстане! Как сделать что бы при вводе названия города выпадал список из того что есть! Что бы по Алматы показывались только улицы и дома Алматы ! А не полный файл в 30 000 домов, сколько примерно это стоит если заказывать у фрилансера?? Если есть пример и html код, что бы мог сделать мой программист ! Если там не сложно Заранее благодарю за ответ

Answer 1

Вот так на коленке это все решается. В <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>"); 
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form> 
  <input name="city" id="city" list="citys"> 
  <input name="street" id="street" list="streets"> 
  <input name="house" id="house" list="houses"> 
</form>