06. Type Ahead

プロジェクトの概要

コード作成順序

学んだこと

- Fetch API

fetch('http://example.com/movies.json')
 .then(response => response.json())
 .then(data => console.log(data));

- spread syntax('...')

-regExp(正規表現)

最終コード

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

      const cities = [];
      fetch(endpoint)
        .then((blob) => blob.json())
        .then((data) => {
          cities.push(...data);
          console.log(cities);
        });

      // cities에서 검색어와 매치되는 데이터만 선별
      function findMatches(wordToMatch, cities) {
        return cities.filter((place) => {
   
          const regex = new RegExp(wordToMatch, 'gi');
          return place.city.match(regex) || place.state.match(regex);
        });
      }
     function numberWithCommas(x) {
        //세자리 숫자마다 콤마 찍기 위함
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      }

      function displayMatches() {
        const matchArray = findMatches(this.value, cities);
        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;
      }

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

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

に感銘を与える