From fbbe78c5a88d614ea7b53ebefa7844189713b0f6 Mon Sep 17 00:00:00 2001
From: changicho <changicho29@gmail.com>
Date: Thu, 4 Jun 2020 17:19:03 +0900
Subject: [PATCH] Fead: Add 06 - Type Ahead
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

?: 정규표현식을 이용한 문자열 filter
결과 sorting 추가
---
 06 - Type Ahead/changi.html | 78 +++++++++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 06 - Type Ahead/changi.html
diff --git a/06 - Type Ahead/changi.html b/06 - Type Ahead/changi.html
new file mode 100644
index 0000000..2bbf4ba
--- /dev/null
+++ b/06 - Type Ahead/changi.html	
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Type Ahead 👀</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <form class="search-form">
+      <input type="text" class="search" placeholder="City or State" />
+      <ul class="suggestions">
+        <li>Filter for a city</li>
+        <li>or a state</li>
+      </ul>
+    </form>
+    <script>
+      const endpoint =
+        "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json";
+
+      const cities = [];
+
+      fetch(endpoint)
+        .then((res) => res.json())
+        .then((data) => {
+          cities.push(...data);
+        });
+
+      function numberWithCommas(x) {
+        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+      }
+
+      function findMatches(wordToMatch, cities) {
+        return cities.filter((place) => {
+          const regex = new RegExp(wordToMatch, "gi");
+          return place.city.match(regex) || place.state.match(regex);
+        });
+      }
+
+      function displayMatches() {
+        const matchArray = findMatches(this.value, cities);
+
+        matchArray.sort((a, b) => {
+          return a.city < b.city ? -1 : 1;
+        });
+
+        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 searchInputs = document.querySelector(".search");
+      const suggestions = document.querySelector(".suggestions");
+
+      searchInputs.addEventListener("change", displayMatches);
+      searchInputs.addEventListener("keyup", displayMatches);
+    </script>
+  </body>
+</html>
