Выполнить запрос из обработчика

Основная задача вывести список городов как подсказка при вводе первых букв.

Текущий вопрос в том что я не понимаю как в запрос добавить значение из инпута.

Ответ с апи приходит в виде коллбека в котором лежит массив с обьектами

<html>

<body>
  <form class="form">
    <label class="form__label">Город:</label>
    <input list="city-list" id="myList" name="myList" class="form__input">
  </form>

  <script>
    const queryInput = document.querySelector('.form__input');
    
    queryInput.addEventListener('input', (evt) => {})
    
    const src = `https://kladr-api.ru/api.php?contentType=city&limit=1&query=${evt.target.value}&callback=apiData`;

    function apiData(data) {
      let cityArr = data.result;
      return cityArr.map(function(city) {
        console.log(city.name)
        queryInput.innerHTML = `<datalist id="city-list">
                                 <option>${city.name}</option>
                               </datalist>`;
      })
    }
    document.body.append(
      Object.assign(
        document.createElement('script'), {
          src
        }
      )
    )
  </script>
</body>

</html>

https://codepen.io/amillerr/pen/ExoNXXj?editors=1001


Ответы (0 шт):