wip

44_autocomplete/index.html

@@ -26,6 +26,6 @@
         </div>
     </div>
     <script src="js/bootstrap.bundle.js"></script>
-    <script src="script.js"></script>
+    <script src="script_api.js"></script>
 </body>
 </html>

44_autocomplete/script_api.js

@@ -0,0 +1,49 @@
+const pokemoni = []
+let dataNactena = false;
+
+const input = document.getElementById("search")
+const list = document.getElementById("results")
+
+function normalizujJmenoPokemona(name) {
+    return name
+        .split("-")
+        .map(cast => cast.charAt(0).toUpperCase() + cast.slice(1))
+        .join("-");
+}
+
+fetch("https://pokeapi.co/api/v2/pokemon?limit=20000&offset=0")
+        .then(response => response.json())
+        .then(data => {
+        pokemoni = data.results.map(pokemon => normalizujJmenoPokemona(pokemon.name));
+        dataNactena = true;
+        console.log(pokemoni);
+        })
+        .catch(() => {
+            list.innerHTML = '<li class="list-group-item"> ERROR </li>'
+        });
+
+
+input.addEventListener("input", () => {
+    const value = input.value.toLowerCase().trim();
+
+    if( value === ""){
+        list.innerHTML= '<li class="list-group-item text-muted">Zatím nic nehledáš...</li>';
+        return;
+    }
+
+    if(!dataNactena){
+        list.innerHTML= '<li class="list-group-item text-muted">NAČÍTÁM DATA</li>';
+        return;
+    }
+
+
+    const filtered = pokemoni.filter(p => p.toLowerCase().includes(value));
+    console.log(filtered)
+    if (filtered.length > 0){
+        list.innerHTML = filtered
+                    .map(p => `<li class="list-group-item list-group-item-action">${p}</li>`)
+                    .join("");
+    } else {
+        list.innerHTML = '<li class="list-group-item list-group-item-danger">Žádný pokemon nenalezen :( </li>';
+    }
+})