From 4e2d382f9fdae304d6b4d415c819aa9c4675cc34 Mon Sep 17 00:00:00 2001
From: Yuri Reis <yuri.reis@msn.com>
Date: Sun, 16 Oct 2022 22:18:10 -0300
Subject: [PATCH] feat: add input autocomplete example

what's new:

- autocomplete example with south-american countries
- added hover pattern when user tries to select some option
---
 inputs/index.html | 248 ++++++++++++++++++++++++++++++++--------------
 1 file changed, 176 insertions(+), 72 deletions(-)
diff --git a/inputs/index.html b/inputs/index.html
index a0263fd..4197148 100644
--- a/inputs/index.html
+++ b/inputs/index.html
@@ -1,82 +1,186 @@
 <!DOCTYPE html>
 <html>
-
-<head>
-    <meta charset='utf-8'>
-    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>HTML Tips and Tricks - Inputs</title>
-    <meta name='viewport' content='width=device-width, initial-scale=1'>
-    <link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet">
-    <link rel='stylesheet' type='text/css' media='screen' href='../main.css'>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" type="text/css" media="screen" href="../main.css" />
+
+    <style>
+      #auto-complete-field {
+        position: relative;
+      }
+
+      #south-america-countries {
+        position: absolute;
+        background-color: white;
+      }
+
+      .country {
+        margin: 4px 8px;
+        color: black;
+        cursor: pointer;
+      }
+
+      .country:hover {
+        background-color: darkcyan;
+        color: white;
+      }
+    </style>
 
     <script>
-        function showColor(event) {
-            let colorHex = event.target.value;
-            document.getElementById('colorMe').style.color = colorHex;
+      function showColor(event) {
+        let colorHex = event.target.value;
+        document.getElementById("colorMe").style.color = colorHex;
+      }
+
+      function loadTextsIntoDiv({ id = "", texts = [], textClass = "" }) {
+        const el = document.getElementById(id);
+        el.innerHTML = "";
+        el.innerHTML = texts
+          .map((text) => `<div class="${textClass}">${text}</div>`)
+          .join("");
+      }
+
+      function showCountries(value) {
+        const countries = [
+          "Brazil",
+          "Argentina",
+          "Colombia",
+          "Peru",
+          "Chile",
+          "Venezuela",
+          "Ecuador",
+          "Bolivia",
+          "Uruguay",
+          "Paraguay",
+          "Guyana",
+          "Suriname",
+          "French Guiana",
+          "Aruba",
+          "Curaçao",
+          "Falkland Islands",
+          "Trinidad and Tobago",
+        ].sort();
+
+        const text = value.trim().toLowerCase();
+        const hasMatch = countries.some(
+          (country) => country.toLowerCase() === text
+        );
+
+        let selectedCounties = [];
+
+        if (text && !hasMatch) {
+          selectedCounties = countries.filter((country) =>
+            country.toLowerCase().includes(text)
+          );
         }
+
+        loadTextsIntoDiv({
+          id: "south-america-countries",
+          texts: selectedCounties,
+          textClass: "country",
+        });
+      }
     </script>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="demo">
-        <a href="../index.html" class="home">
-            <img src="../home.svg" alt="home" />
-        </a>
-        <h1>All about Inputs</h1>
-
-        <h2>Color picker</h2>
-        <input type="color" onchange="showColor(event)">
-        <p id="colorMe">Color Me!</p>
-
-        <div class="box">
-            <h2>Required</h2>
-            <form>
-                <label for="username1">Username:</label>
-                <input type="text" id="username1" name="username" required>
-                <input type="submit">
-            </form>
-        </div>
-
-        <div class="box">
-            <h2>Autofocus</h2>
-            <form>
-                <label for="username2">Username:</label>
-                <input type="text" id="username2" name="username" required autofocus>
-                <input type="submit">
-            </form>
-        </div>
-
-        <div class="box">
-            <h2>Placeholder</h2>
-            <form>
-                <label for="username3">Username:</label>
-                <input type="text" id="username3" name="username" placeholder="Enter your username">
-                <input type="submit">
-            </form>
-        </div>
-
-        <div class="box">
-            <h2>E-mail</h2>
-            <form>
-                <label for="email">Username:</label>
-                <input id="email" name="email" type="email" />
-                <input type="submit">
-            </form>
-        </div>
-
-        <div class="box">
-            <h2>Regex validations</h2>
-            <form>
-                <label for="password">Strong password($Password1234):</label>
-                <input type="password" 
-                        name="password" 
-                        id="password" 
-                        placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter" 
-                        pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$" autofocus required>
-                <button type="submit"> Test </button>
-            </form>
-        </div>        
-    </div>
-</body>
+      <a href="../index.html" class="home">
+        <img src="../home.svg" alt="home" />
+      </a>
+      <h1>All about Inputs</h1>
+
+      <h2>Color picker</h2>
+      <input type="color" onchange="showColor(event)" />
+      <p id="colorMe">Color Me!</p>
+
+      <div class="box">
+        <h2>Required</h2>
+        <form>
+          <label for="username1">Username:</label>
+          <input type="text" id="username1" name="username" required />
+          <input type="submit" />
+        </form>
+      </div>
+
+      <div class="box">
+        <h2>Autofocus</h2>
+        <form>
+          <label for="username2">Username:</label>
+          <input
+            type="text"
+            id="username2"
+            name="username"
+            required
+            autofocus
+          />
+          <input type="submit" />
+        </form>
+      </div>
 
-</html>
\ No newline at end of file
+      <div class="box">
+        <h2>Placeholder</h2>
+        <form>
+          <label for="username3">Username:</label>
+          <input
+            type="text"
+            id="username3"
+            name="username"
+            placeholder="Enter your username"
+          />
+          <input type="submit" />
+        </form>
+      </div>
+
+      <div class="box">
+        <h2>E-mail</h2>
+        <form>
+          <label for="email">Username:</label>
+          <input id="email" name="email" type="email" />
+          <input type="submit" />
+        </form>
+      </div>
+
+      <div class="box">
+        <h2>Regex validations</h2>
+        <form>
+          <label for="password">Strong password($Password1234):</label>
+          <input
+            type="password"
+            name="password"
+            id="password"
+            placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter"
+            pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$"
+            autofocus
+            required
+          />
+          <button type="submit">Test</button>
+        </form>
+      </div>
+
+      <div class="box">
+        <h2>Auto Complete</h2>
+        <form>
+          <label for="auto-complete-field">South America Country:</label>
+          <br />
+          <form autocomplete="on">
+            <input
+              type="text"
+              name="auto-complete-field"
+              id="auto-complete-field"
+              onkeyup="showCountries(this.value)"
+            />
+            <div id="south-america-countries"></div>
+          </form>
+        </form>
+      </div>
+    </div>
+  </body>
+</html>
