finished ajax

mark-conn · mark-conn · commit f00fecd30ad0 · 2017-04-20T12:29:40.000-04:00
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
@@ -15,8 +15,42 @@
     </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 = [];
+    const data = fetch(endpoint).then(result => result.json()).then(json => cities.push(...json));
 
+    function findMatches(wordToMatch, cities) {
+        return cities.filter(obj => {
+            // here we need to figure out if the city or state matches what was searched
+            // g is for global, i for in insensitive
+            const regex = new RegExp(wordToMatch, 'gi')
+            return obj.city.match(regex) || obj.state.match(regex)
+        })
+    }
+
+    function displayMatches() {
+        const matchArray = findMatches(this.value, cities)
+        const html = matchArray.map(obj => {
+            const regex = new RegExp(this.value, 'gi')
+            const cityName = obj.city.replace(regex,
+            `<span class="hl">${this.value}</span>`)
+            const stateName = obj.state.replace(regex,
+            `<span class="hl">${this.value}</span>`)
+            return `
+                <li>
+                    <span class="name">${cityName} ${stateName}</span>
+                    <span class="population">${obj.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>
 </html>
