Add search by name

form.js

@@ -47,6 +47,9 @@ const selectors = {
   get colorSearchResults() {
     return document.getElementById("color-results");
   },
+  get nameSearchResults() {
+    return document.getElementById("name-results");
+  },
   set background(hex) {
     document.querySelector(":root").style.setProperty("--background", hex);
   },
@@ -315,11 +318,34 @@ const makePokemonTile = (name) => {
   return clone;
 };
 
+const pokemonLookup = new Fuse(pokemonData, { keys: ["name"] });
+let currentNameSearchResults = [];
+
+const searchByName = (newSearch) => {
+  currentNameSearchResults = pokemonLookup
+    .search(newSearch, { limit: 10 })
+    .map(({ item: { name } }) => name);
+  showResults();
+};
+
+const randomPokemon = () => {
+  currentNameSearchResults = Array.from(
+    { length: 10 },
+    () => pokemonData[Math.floor(Math.random() * pokemonData.length)].name
+  );
+  showResults();
+};
+
 const showResults = () => {
   selectors.colorSearchResults.innerHTML = "";
   sortedData.slice(0, selectors.resultsToDisplay).forEach((name) => {
     selectors.colorSearchResults.appendChild(makePokemonTile(name));
   });
+
+  selectors.nameSearchResults.innerHTML = "";
+  currentNameSearchResults.forEach((name) => {
+    selectors.nameSearchResults.appendChild(makePokemonTile(name));
+  });
 };
 
 window.addEventListener("load", () => {

index.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="styles.css" />
     <script src="https://unpkg.com/d3-color@3.0.1/dist/d3-color.min.js"></script>
     <script src="https://unpkg.com/d3-cam02@0.1.5/build/d3-cam02.min.js"></script>
+    <script src="https://unpkg.com/fuse.js@6.5.3/dist/fuse.min.js"></script>
     <script src="database-v3.js"></script>
     <script src="math.js"></script>
     <script src="form.js"></script>
@@ -211,6 +212,16 @@
 
     <div id="color-results"></div>
 
+    <input
+      type="text"
+      autocomplete="off"
+      id="name-search"
+      oninput="searchByName(event.target.value)"
+    />
+    <button type="button" onclick="randomPokemon()">Random Pokemon</button>
+
+    <div id="name-results"></div>
+
     <div>
       <div>Previous Colors</div>
       <div id="prev-colors"></div>

styles.css

@@ -49,6 +49,7 @@ select:disabled {
   height: 100%;
   display: inline-flex;
   align-items: center;
+  padding-right: 1ch;
 }
 
 .pkmn > .pkmn-score {
@@ -99,3 +100,9 @@ select:disabled {
 .pkmn > .pkmn-cls4 {
   grid-area: cls4;
 }
+
+#color-results,
+#name-results {
+  min-width: fit-content;
+  max-width: 50vw;
+}