Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.02.2021, 20:36
Che Che вне форума
Интересующийся
Отправить личное сообщение для Che Посмотреть профиль Найти все сообщения от Che
 
Регистрация: 28.08.2012
Сообщений: 23

Подсказчик городов для input type text из json-файла. Как?
Добрый вечер.

Делаю тестовое. Синглпейдж приложение прогноза погоды. Прогнозы по вводу города уже приходят (openweathermap), json разбираю и вывожу на странице прогноз на 5 дней.

Теперь нужно, чтобы при вводе города в инпут выводились подсказки городов из json-файла, который валяется в папке приложения (структуру см ниже). id у городов, которые возвращает API openweathermaps и в файле разные, если это важно.

Чего-то туториалы от индусов на ютубе по этому поводу молчат, либо плохо искал. Подскажите, пожадуйста, куда копать. Нужно решение на JS, jquery и сторонние библиотеки не подходит по условиям тестового.
---
Код:
{
"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
  }
},
Ответить с цитированием
  #2 (permalink)  
Старый 13.02.2021, 20:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Che,
https://developer.mozilla.org/en-US/...ement/datalist
Ответить с цитированием
  #3 (permalink)  
Старый 13.02.2021, 21:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

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>
Ответить с цитированием
  #4 (permalink)  
Старый 13.02.2021, 21:13
Che Che вне форума
Интересующийся
Отправить личное сообщение для Che Посмотреть профиль Найти все сообщения от Che
 
Регистрация: 28.08.2012
Сообщений: 23

@рони, спасибо. После вашей подсказки также нашел решение просто на ul li элементах, на проекте с которым работал.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать ссылки из файла CSS корректными для всех директрорий сайта? GrEb (X)HTML/CSS 7 28.01.2020 12:56
есть дата. как к ней прибавить 30 минут и вывести в поле input type date Sergey1986 Общие вопросы Javascript 9 15.11.2018 12:54
убрать прокрутку с элемента Vampir3 Общие вопросы Javascript 1 06.02.2013 17:20
Изменение цвета ссылок при наведении на другую облсть iHun jQuery 6 15.05.2012 19:52
JSON или JSONP для запросов на другой сервер? Метод GET, для длинных сообщений? Kotakota jQuery 5 23.08.2011 23:12