From: Jacob Casper Date: Sat, 25 Apr 2020 19:32:55 +0000 (-0500) Subject: Use datalist instead of home-rolled autocomplete X-Git-Url: https://git.jacobcasper.com/?p=brackets.git;a=commitdiff_plain;h=74f7e9225983b6ea521a1328238a5031c95eb057 Use datalist instead of home-rolled autocomplete --- diff --git a/frontend/index.css b/frontend/index.css index 376f66e..23b3c15 100644 --- 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 --- a/frontend/index.html +++ b/frontend/index.html @@ -8,17 +8,19 @@

+ Pick your favorite genre: -

+ diff --git a/frontend/index.js b/frontend/index.js index 423a641..838b623 100644 --- 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() });