From a786d0e05018002d79171da4096893914027e179 Mon Sep 17 00:00:00 2001
From: Caleb Fultz <caleb@fultz.dev>
Date: Wed, 21 Aug 2024 08:46:39 -0400
Subject: [PATCH] Corrected autocomplete

---
 app.js     | 36 +++++++++++++++++++++++++++++++++---
 index.html | 50 +++++++++++++++++++-------------------------------
 2 files changed, 52 insertions(+), 34 deletions(-)

diff --git a/app.js b/app.js
index 45c8ca7..63e9d4c 100644
--- a/app.js
+++ b/app.js
@@ -61,11 +61,41 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 async function fetchCardSuggestions(query) {
-    const response = await fetch(`https://api.scryfall.com/cards/autocomplete?q=${encodeURIComponent(query)}`);
-    const data = await response.json();
-    return data.data;
+    try {
+        const response = await fetch(`https://api.scryfall.com/cards/autocomplete?q=${encodeURIComponent(query)}`);
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        const data = await response.json();
+        return data.data;
+    } catch (error) {
+        console.error('Fetch error:', error);
+        return [];
+    }
 }
 
+document.getElementById('card-name').addEventListener('input', async function() {
+    const query = this.value.trim();
+    if (query.length < 2) { // Only search for queries longer than 1 character
+        document.getElementById('suggestions').innerHTML = '';
+        return;
+    }
+    const suggestions = await fetchCardSuggestions(query);
+    const suggestionsDiv = document.getElementById('suggestions');
+    suggestionsDiv.innerHTML = ''; // Clear previous suggestions
+
+    suggestions.forEach(suggestion => {
+        const div = document.createElement('div');
+        div.textContent = suggestion;
+        div.onclick = () => {
+            document.getElementById('card-name').value = suggestion;
+            suggestionsDiv.innerHTML = ''; // Clear suggestions after selection
+        };
+        suggestionsDiv.appendChild(div);
+    });
+});
+
+
 async function fetchCardDetails(cardName, setCode) {
     // Use the Scryfall 'named' endpoint to fetch the exact card by name and set code
     const response = await fetch(`https://api.scryfall.com/cards/named?exact=${encodeURIComponent(cardName)}&set=${encodeURIComponent(setCode)}`);
diff --git a/index.html b/index.html
index d870f7b..b2c3e5c 100644
--- a/index.html
+++ b/index.html
@@ -30,45 +30,34 @@
         </div>
 
         <h1>MTG Card CSV Generator</h1>
-        <form id="card-form" class="mdc-card">
-            <div class="mdc-text-field mdc-text-field--outlined">
-                <input type="text" id="card-name" class="mdc-text-field__input" autocomplete="off" required>
-                <label class="mdc-floating-label" for="card-name">Card Name</label>
-                <div class="mdc-line-ripple"></div>
+        <form id="card-form">
+            <div>
+                <label for="card-name">Card Name:</label>
+                <input type="text" id="card-name" autocomplete="off" required>
+                <div id="suggestions"></div>
             </div>
-        
-            <div class="mdc-text-field mdc-text-field--outlined">
-                <input type="text" id="set-code" class="mdc-text-field__input" required>
-                <label class="mdc-floating-label" for="set-code">Set Code</label>
-                <div class="mdc-line-ripple"></div>
+            <div>
+                <label for="set-code">Set Code:</label>
+                <input type="text" id="set-code" required>
             </div>
-        
-            <div class="mdc-text-field mdc-text-field--outlined">
-                <input type="text" id="card-id" class="mdc-text-field__input" required>
-                <label class="mdc-floating-label" for="card-id">Card ID</label>
-                <div class="mdc-line-ripple"></div>
+            <div>
+                <label for="card-id">Card ID:</label>
+                <input type="text" id="card-id" required>
             </div>
-        
-            <div class="mdc-text-field mdc-text-field--outlined">
-                <input type="number" id="quantity" class="mdc-text-field__input" min="1" value="1" required>
-                <label class="mdc-floating-label" for="quantity">Quantity</label>
-                <div class="mdc-line-ripple"></div>
+            <div>
+                <label for="quantity">Quantity:</label>
+                <input type="number" id="quantity" min="1" value="1" required>
             </div>
-        
-            <div class="mdc-select">
-                <select id="foil" class="mdc-select__native-control">
+            <div>
+                <label for="foil">Is it Foil?</label>
+                <select id="foil">
                     <option value="No">No</option>
                     <option value="Yes">Yes</option>
                 </select>
-                <label class="mdc-floating-label">Is it Foil?</label>
-                <div class="mdc-line-ripple"></div>
             </div>
-        
-            <button type="button" class="mdc-button mdc-button--raised" id="add-card-button">Add Card</button>
+            <button type="button" id="add-card-button">Add Card</button>
         </form>
-        
-        <button class="mdc-button mdc-button--outlined" id="download-csv-button">Download CSV</button>
-        
+        <button id="download-csv-button">Download CSV</button>
         <textarea id="csv-output" readonly></textarea>
         <div id="card-popup" class="card-popup"></div>
     </div>
@@ -86,6 +75,5 @@
           navigator.serviceWorker.register('sw.js')
         }
       </script>
-      
 </body>
 </html>