Подсказчик городов для input type text из json-файла. Как?
Добрый вечер.
Делаю тестовое. Синглпейдж приложение прогноза погоды. Прогнозы по вводу города уже приходят (openweathermap), json разбираю и вывожу на странице прогноз на 5 дней. Теперь нужно, чтобы при вводе города в инпут выводились подсказки городов из json-файла, который валяется в папке приложения (структуру см ниже). id у городов, которые возвращает API openweathermaps и в файле разные, если это важно. Чего-то туториалы от индусов на ютубе по этому поводу молчат, либо плохо искал. Подскажите, пожадуйста, куда копать. Нужно решение на JS, jquery и сторонние библиотеки не подходит по условиям тестового. --- Код:
{ |
|
datalist city
Che,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener("DOMContentLoaded", function() {
let ar = [{
"id": 6436438,
"name": "Montsûrs",
"state": "",
"country": "FR",
"coord": {
"lon": -0.55,
"lat": 48.133331
}
},
{
"id": 6436439,
"name": "Moulay",
"state": "",
"country": "FR",
"coord": {
"lon": -0.63333,
"lat": 48.26667
}
},
{
"id": 6436443,
"name": "Nuillé-sur-Vicoin",
"state": "",
"country": "FR",
"coord": {
"lon": -0.78333,
"lat": 47.98333
}
}
];
city.append(...ar.map(({ name }) => new Option(name)));
});
</script>
</head>
<body>
<label for="choice">Choose a city:</label>
<input list="city" id="choice" name="choice" />
<datalist id="city">
</datalist>
</body>
</html>
|
@рони, спасибо. После вашей подсказки также нашел решение просто на ul li элементах, на проекте с которым работал.
|
| Часовой пояс GMT +3, время: 23:28. |