Type ahead

victorkurauchi · victorkurauchi · commit 6a6349598055 · 2020-03-19T17:43:27.000-03:00
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
@@ -17,6 +17,47 @@
 <script>
 const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
 
+let cities = [];
+
+async function getData() {
+  const response = await fetch(endpoint);
+  cities = await response.json();
+}
+
+function numberWithCommas(x) {
+  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+function handleSearch() {
+  console.log('hey', this.value);
+  const filtered = cities.filter(c => c.city.toLowerCase().includes(this.value) || c.state.toLowerCase().includes(this.value))
+  console.log(filtered);
+
+  const ulElement = document.querySelector('.suggestions');
+  const html = filtered.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('');
+
+  ulElement.innerHTML = html;
+}
+
+async function start() {
+  await getData();
+
+  const input = document.querySelector('.search');
+  input.addEventListener('keyup', handleSearch);
+}
+
+start();
+
 </script>
 </body>
 </html>
