diff --git a/44_autocomplete/index.html b/44_autocomplete/index.html index f8ebef9..286cf4d 100644 --- a/44_autocomplete/index.html +++ b/44_autocomplete/index.html @@ -26,6 +26,6 @@ - + \ No newline at end of file diff --git a/44_autocomplete/script_api.js b/44_autocomplete/script_api.js new file mode 100644 index 0000000..515545c --- /dev/null +++ b/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 = '
  • ERROR
  • ' + }); + + +input.addEventListener("input", () => { + const value = input.value.toLowerCase().trim(); + + if( value === ""){ + list.innerHTML= '
  • Zatím nic nehledáš...
  • '; + return; + } + + if(!dataNactena){ + list.innerHTML= '
  • NAČÍTÁM DATA
  • '; + return; + } + + + const filtered = pokemoni.filter(p => p.toLowerCase().includes(value)); + console.log(filtered) + if (filtered.length > 0){ + list.innerHTML = filtered + .map(p => `
  • ${p}
  • `) + .join(""); + } else { + list.innerHTML = '
  • Žádný pokemon nenalezen :(
  • '; + } +}) \ No newline at end of file