projects / brackets.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 67e00f5)
Use datalist instead of home-rolled autocomplete
authorJacob Casper <dev@jacobcasper.com>
Sat, 25 Apr 2020 19:32:55 +0000 (14:32 -0500)
committerJacob Casper <dev@jacobcasper.com>
Sat, 25 Apr 2020 19:32:55 +0000 (14:32 -0500)
frontend/index.css patch | blob | blame | history
frontend/index.html patch | blob | blame | history
frontend/index.js patch | blob | blame | history

diff --git a/frontend/index.css b/frontend/index.css
index 376f66e..23b3c15 100644 (file)
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -1,15 +1,3 @@
-ul {
-    position: absolute;
-    display: none;
-}
-li {
-    display: block;
-    background-color: white;
-}
-li:hover {
-    background-color: black;
-    color: white;
-}
 input#genre-submit {
     display: none;
 }
diff --git a/frontend/index.html b/frontend/index.html
index 8b9b3cb..a59706e 100644 (file)
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,17 +8,19 @@
     </head>
     <body>
         <form id="genre-form">
+            <label for="genre-input">Pick your favorite genre:</labe>
             <input id="genre-input" 
                    type="text"
+                   list="genre-list"
                    placeholder="Genre Name"
                    autocomplete="off"/>
             <input id="genre-submit"
                    type="submit"/>
         </form>
-        <ul id="genre-list"></ul>
         <canvas id="bracket"></canvas> 
         <input id="image-upload" 
                type="file"
                accept="image/*">
+        <datalist id="genre-list"/>
     </body>
 </html>
diff --git a/frontend/index.js b/frontend/index.js
index 423a641..838b623 100644 (file)
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -14,11 +14,11 @@ const formSubmitPolyfill = (form, callback) => {
 const createGenreListWithClickEvent = (genreList, genres, callback) => {
     genreList.append(...genres.map((genre) => {
         const name = genre["name"];
-        const li = document.createElement("li");
-        li.setAttribute("data-name", name);
-        li.addEventListener("click", callback);
-        li.appendChild(document.createTextNode(name));
-        return li;
+        const option = document.createElement("option");
+        option.setAttribute("data-name", name);
+        option.addEventListener("click", callback);
+        option.appendChild(document.createTextNode(name));
+        return option;
     }));
 }
 
@@ -163,10 +163,12 @@ window.onload = () => {
         .then((data) => drawBracket(canvas, data.slice(0, 33), genreInput.value));
     }
 
+    const genreFormSubmitPolyfill = () => formSubmitPolyfill(genreList, formSubmitAction)
+
     const createGenreList = (genreList, genres) => {
         return createGenreListWithClickEvent(genreList, genres, (e) => {
             genreInput.value = e.target.innerText;
-            formSubmitPolyfill(genreForm, formSubmitAction);
+            genreFormSubmitPolyfill()
         })
     }
     let genres = JSON.parse(lStorage.getItem("genres"))
@@ -187,15 +189,8 @@ window.onload = () => {
         formSubmitAction()
     });
 
-    genreInput.addEventListener("input", (e) => {
-        const input = e.target;
-        Array.from(genreList.children).forEach((item) => item.style.display= item.dataset.name.includes(input.value.toLowerCase()) ? "block" : "none");
-    });
-    genreInput.addEventListener("focus", (e) => {
-        genreList.style.display = "block";
-    });
-    genreInput.addEventListener("blur", (e) => {
-        sleep(150).then(() => genreList.style.display = "none");
+    genreInput.addEventListener("change", (e) => {
+        genreFormSubmitPolyfill()
     });
 
 
Brackets for Instagram Stories