개인적으로 공부하고 이해한 내용이므로, 틀린 부분이 있을 수 있으니 많은 지적 바랍니다 :)

1. 변수선언

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

      const cities = [];
      // cities 초기화, 검색어에 따라 바뀔 부분

2. fetch API

      fetch(endpoint)
        .then((blob) => blob.json())
      // 객체의 값을 json으로 변환
        .then((data) => cities.push(...data));
      // data에 'cities에 ...data'를 push
  • 기본구조 : fetch('주소', 설정객체).then(콜백).catch(콜백);
  • blob : 응답 객체에서 값을 볼 수 있게 해주는 메소드

3. 검색어와 일치하는 값을 출력하는 함수

      function findMatches(wordToMatch, cities) {
        //wordToMatch : input text value
        return cities.filter((place) => {
          const regex = new RegExp(wordToMatch, 'gi'); 
          //검색시 단어가 일치하는 도시 또는 주를 변환하는 함수
          // RegExp : 검색할때 패턴을 설정해줄 수 있는 생성자
          // gi : '전체'에서 대소문자 구분 없이 검색 가능
          return place.city.match(regex) || place.state.match(regex);
        });
      } 

4. 인구수에 comma를 찍는 함수

      function numberWithCommas(x) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      }
        // toString() : 숫자에는 replace()메소드를 사용할 수 없기 때문에 사용함
        // replace() :  어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환

이제 위 두 함수에 대한 출력화면에 출력해야합니다!

5. 도시와 인구수를 화면에 보여주는 함수

      function displayMatches() {
        const matchArray = findMatches(this.value, cities); 
        //일치하는 값을 matchArray에 담기
        //this = target.event
        const html = matchArray
          .map((place) => {
            const regex = new RegExp(this.value, 'gi');
            const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`);
            const stateName = place.state.replace(regex, `<span class="hl">${this.value}</span>`);
            return `
      <li>
        <span class="name">${cityName}, ${stateName}</span>
        <span class="population">${numberWithCommas(place.population)}</span>
      </li>
    `;
          })
          .join('');
        suggestions.innerHTML = html;
      }

함수를 등록해주면 완성!

6. 이벤트 리스너 등록

      const searchInput = document.querySelector('.search');
      const suggestions = document.querySelector('.suggestions');

      searchInput.addEventListener('change', displayMatches);
      searchInput.addEventListener('keyup', displayMatches);
    </script>

참고