Implement name search

index.html

@@ -191,31 +191,29 @@
       <div id="sort-metric-mount"></div>
       <div id="cls-fn-mount"></div>
       <div id="cls-metric-mount"></div>
+      <hr />
+      <div id="nameSearch" class="flex col small-gap">
+        <div class="emphasis center">Name Search</div>
+        <input
+          class="pill-shape highlight-border"
+          type="text"
+          autocomplete="off"
+          bind-to="input"
+        />
+        <button type="button" bind-to="button">Random Pokemon</button>
+      </div>
     </div>
 
     <main class="section flow">
       <div id="color-results-label" class="emphasis">By Color</div>
       <div id="color-results" class="flex wrap"></div>
-      <div id="name-results-label">By Name</div>
-      <div id="name-results"></div>
+      <div id="name-results-label" class="emphasis">By Name</div>
+      <div id="name-results" class="flex wrap"></div>
     </main>
 
     <div class="section | flow">
       <div class="emphasis center">Previous Colors</div>
       <div id="prevColors"></div>
     </div>
-    <!-- 
-      <div id="name-search-container">
-        <div>Name Search</div>
-        <button type="button" onclick="randomPokemon()">Random Pokemon</button>
-        <input
-          type="text"
-          autocomplete="off"
-          id="name-search"
-          oninput="searchByName(event.target.value)"
-        />
-      </div> 
-    </div>
--->
   </body>
 </html>

script.js

@@ -441,6 +441,7 @@ const displayPokemon = (pkmnName, target) => {
   );
 };
 
+// ---- Display Logic ----
 const colorSearchResultsTarget = document.getElementById("color-results");
 colorSearchResults.subscribe(() => {
   colorSearchResultsTarget.innerHTML = "";
@@ -449,4 +450,31 @@ colorSearchResults.subscribe(() => {
   );
 });
 
+// ---- Name Search ----
+U.element("nameSearch", ({ input, button }) => {
+  const nameSearchInput = U.field(input);
+
+  const lookupLimit = 24;
+  const pokemonLookup = new Fuse(pokemonData, { keys: ["name"] });
+  const nameSearchResults = U.obs(() =>
+    pokemonLookup
+      .search(nameSearchInput.value, { limit: lookupLimit })
+      .map(({ item: { name } }) => name)
+  );
+
+  button.addEventListener("click", () => {
+    nameSearchResults.value = Array.from(
+      { length: lookupLimit },
+      () => pokemonData[Math.floor(Math.random() * pokemonData.length)].name
+    );
+  });
+
+  const nameResultsTarget = document.getElementById("name-results");
+  nameSearchResults.subscribe(() => {
+    nameResultsTarget.innerHTML = "";
+    nameSearchResults.value.forEach((name) => displayPokemon(name, nameResultsTarget));
+  });
+});
+
+// ---- Initial Target ----
 randomizeTargetColor();

styles.css

@@ -219,6 +219,11 @@ button.color-select:hover {
   margin-inline-start: 1ch;
 }
 
+#nameSearch input {
+  text-align: center;
+  padding-block: 0.5ch;
+}
+
 .pkmn-tile {
   max-width: 24ch;
   padding-inline: 0.5ch;