Wyszukiwarka elementów z tablicy js

pytanie zadane 16 lipca 2021 w JavaScript przez Meksykanin Początkujący (250 p.)

Cześć, uczę się dopiero i postanowiłem, że w ramach ćwiczenia napiszę program, który wyszukuje z tablicy elementy, ktore pasują do tego, co wpiszemy w inpucie. Działa on w ten sposób, że wystarczy, że dany element zawiera w sobie to, co wpisujemy w input, a funkcja wyswietla cały element. Zastanawia mnie jednak, czy nie ma jakiegoś wbudowanego rozwiązania, które działałoby w ten sposób?

https://codepen.io/Metrok/pen/vYmmKJX

2 odpowiedzi

odpowiedź 16 lipca 2021 przez Comandeer Guru (600,810 p.)

Jest wbudowana funkcja Array.prototype.find (to jak chcesz znaleźć jeden element; jak chcesz znaleźć wszystkie pasujące, to Array.prototype.filter). Całe wyszukiwanie można sprowadzić do prostej funkcji.

Natomiast normalizacja wpisanego tekstu może zostać sprowadzona do input.toLowerCase(). Wówczas uzyskamy cały tekst wyłącznie małymi. Oczywiście trzeba pamiętać, żeby przy porównywaniu z wartościami z tablicy te wartości też zmienić na małe.

odpowiedź 16 lipca 2021 przez VBService Ekspert (252,740 p.)

Jeżeli tablica nie zawiera "dużo elementów" możesz dane umieścić bezpośrednio w html-u za pomocą elementu <datalist>

Przykład

<body>

  <input type="text" id="postac" list="postac-list">
  <datalist id="postac-list">
    <option label="wojownik">Trzy</option>
    <option label="mag">Dwa</option>
    <option label="wojownik">Jeden</option>
    <option label="mieszkaniec">Cztery</option>
  </datalist>
  <p id="paragraf"></p>

</body>

window.onload = function() {
  const x = document.querySelector("#postac");
  x.addEventListener("change", pobierzDane);
}

function pobierzDane(e) {
  const miejsceWykonania = document.querySelector("#paragraf");
  miejsceWykonania.textContent = e.target.value;
}