JS30-06.js

const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';

const list = document.querySelector('.suggestions');
const input = document.querySelector('.search');

const populateList = data => {
  const html = data.reduce((acc, item) => {
    acc = `${acc}
    <li>
      <span class="name">${item.city}, ${item.state}</span>
      <span class="population">${item.population}</span>
    </li>`;
    return acc;
  }, '');
  list.innerHTML = html;
}

function inputKeydownHandler(e) {
  const value = this.value;
  const filteredData = allData.filter(item =>
    item.city.toLowerCase().includes(this.value) ||
    item.state.toLowerCase().includes(this.value)
  );
  populateList(filteredData);
}

input.addEventListener('keyup', inputKeydownHandler);
let allData = [];
fetch(endpoint).then(res => res.json()).then((data) => {
  allData = data;
  return data;
}).then(populateList);