complete wesbos#6

Author: Yuri Brunetto

06 - Type Ahead/index-START.html

@@ -15,7 +15,47 @@
     </ul>
   </form>
 <script>
-const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
+
+  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))
+
+  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>
   </body>

06 - Type Ahead/style.css

@@ -5,6 +5,9 @@
       font-size: 20px;
       font-weight: 200;
     }
+    * {
+      -webkit-font-smoothing: antialiased;
+    }
     *, *:before, *:after {
       box-sizing: inherit;
     }