Javascript | Porównywanie wartości input'a z tablicą

Question

Witam,

Posiadam funkcje, która dynamicznie sprawdza  co zostało wpisane do input'a i porównuje to z tablicą. No tutaj nie do końca, gdyż porównuje wyłącznie pierwszą literę. Co zastosować, abym mógł sprawdzać czy to co jest w inpucie znajduje się również w tablicy ?

Przykładowo:

tab[0] = "abadon"
tab[1] = "alchemist"
tab[2] = "axe"

Po wpisaniu do inputa "a" wyszuka mi 3 postacie, po wpisaniu "ax" już tylko tą jedną
Pozdrawiam

Comments

Pokaż kod, którym to sprawdzasz.

---

Będzie to dość ciężkie, wszystko opiera się na zdjęciach, więc najpierw pokaże jak to wygląda:


Mamy inputa, postacie.. po wpisaniu literki, funkcja która ma ustawiony setInterval na bieżąco sprawdza co się w nim zmienia.
Gdy wpiszemy "a" czyli pierwsza litera danego wyrażenia w tablicy [zastosowałem zwyczajne charAt(x) ] Dostaniemy taki efekt:
i taki dla litery "t":


Chodzi mi o to, aby po wpisaniu kolejnej litery zwężało pule wyświetlanych postaci.. no a tego za pomocą charAt(x) niestety nie wykonam

Tutaj kod (Wybaczcie za amatorski, lecz całość próbowałem zrobić tym co potrafię)
 

function check(){
	for(o=0; o <= 36; o++){
		if(input.value == select[o].charAt(0)){
			for(p=0; p <= 36; p++){
				form[p].classList.add("dark");
			}
			if(form[o].classList.contains("dark1")){
				form[o].classList.remove("backlight");
			}
			else{
				form[o].classList.add("backlight");
			}
		}
		else if(input.value == ""){
			form[o].classList.remove("dark");
			form[o].classList.remove("backlight");
		}
		else{
			form[o].classList.remove("backlight");
		}
	}
}
setInterval(check, 1000/5);

P.S. Klasa "dark1" służy do czegoś innego i nie jest pomyłką
P.S. 2 Zaraz wezmę się za poprawę tego okropnego kodu, szczególnie za jego czytelność 

//EDIT 
Tak wygląda część tablicy:
 

var select = new Array(37);

select[0] = "abadon";
select[1] = "alchemist";
select[2] = "axe";
select[3] = "beastmaster"
select[4] = "brewmaster";
select[5] = "bristleback";
select[6] = "centaur";
select[7] = "chaos";
select[8] = "clockwerk";
select[9] = "doom";
select[10] = "dragon_knight";
select[11] = "earth_spirit";

Również nie wiem jak poradzić sobie z "_" gdyż, ktoś wpisujący użyje spacji, a nie mogę tego zamienić na " " ponieważ służy to do automatycznego wpisywania ścieżki do zdjęć.. 
Zakładam, że muszę wykonać drugą tablicę tylko z spacjami, zamiast "_"

---

po wpisaniu literki, funkcja która ma ustawiony setInterval na bieżąco sprawdza co się w nim zmienia

Dlaczego nie skorzystałeś ze zdarzenia input lub change na inpucie, tylko stosujesz interwał?

Zamiast .chatAt może zastosuj zwyczajne porównanie === (jeśli to są zwykłe stringi w tablicy). Czyli sprawdź, czy wartość inputa jest tym samym co o-ty element zmiennej select. Bo charAt(0) zwraca Ci pierwszą literę stringa (i ją porównujesz z wpisaną frazą), a Ty z tego co rozumiem chcesz sprawdzić, czy wpisana fraza jest taka sama jak jakiś element tablicy.

---

Zaraz poczytam o zdarzeniu "input / change". Stosowanie interwału również mi się nie podobało.

Wracając, nie chodzi mi o stricte porównanie czy wartość inputa = wyrażenie z tablicy, lecz sprawdzenie czy w dane "litery" są w jakimkolwiek wyrażeniu

// Brakuje mi precyzji w tym co mówię, gdyż niezbyt jeszcze wiem co i jak się nazywa.
Na chłopski rozum działałoby to tak

Dla input.value = "aba" - ma zwrócić true, gdyż istnieje postać "ABAdon"
Dla inputa.value = "doo" - ma zwrócić true, gdyż istnieje postać "DOOm"
Dla inputa.value = "cent" - ma zwrócić true, gdyż istnieje postać "CENTaur"

Jeżeli to co użytkownik wpisał nie znajduje się nigdzie, to zwyczajnie nic się nie podświetli

Tutaj gif: https://media.giphy.com/media/9AIe7sLycSxBT0h2Dk/giphy.gif
Nie trzeba zwracać uwagi na dodawanie postaci do innego pojemnika

---

do zdarzenia input możesz dorzucić debounce(dla drobnej optymalizacji)

---

A StartWith()?

Answer 1

Coś takiego?

const data = ['abadon', 'alchemist', 'axe'];
function check(str) {
    return data.filter(value => value.includes(str));
}


check('a');  //["abadon", "alchemist", "axe"]
check('ax'); //["axe"]

 

Comments

Nie ukrywam, że nie rozumiem za dużo z tego kodu.. więc po prostu zapytam, czy sprawdza się ona również po wpisaniu "al" dla wyszukania "alchemist'a" ?
Całość tablicy zawiera 115 wyrażeń, jeżeli musiał bym wypisać każdą możliwą opcje, to chyba bym nie dożył. Do tego ktoś może wpisać 3 litery, lub 5, aby wyszukać konkretną postać

---

Funkcja check() pobiera jako argument ciąg znakowy, a następnie filtruję tablicę "data" zostawiając tylko te elementy, które zawierają w sobie ciąg "str". Poczytaj o metodzie Array.prototype.filter.

Pytanie tylko co dokładnie chcesz szukać. Ja założyłem, że szukamy "str" w całym ciągu "abadon", "axe" itp. Jeśli szukalibymy tylko na początku tych słów to metodę includes można by zamienić na startsWith.

Pozostaje też kwestia wielkości znaków. Ja założyłem, że jest ona ważna, czyli "ax" nie jest równoznaczne z "AX". Jeśli wielkość liter nie ma mieć znaczenia to mamy dwie drogi:

1. przelecenie ciągów w tablicy data i ciągu str metodą np. toLowerCase()
2. użycie regexp z flagą "i".

---

Ciąg znaków w kodzie ma znaczenie, lecz chciałbym aby w inpucie nie miał to prawda !
Założenie jest takie, jak podałem w odpowiedzi na komentarz użytkownika @JSHolic, trochę wyżej.

Prościej mówiąc, chciałbym stworzyć wyszukiwarkę postaci. Ktoś wpisuje do inputa "a" i już podświetlają mu się bohaterowie zaczynający się na tą litere, później dodaje "l" no i zostaje sam Alchemist podświetlony.
Wszystko działa, lecz wyłącznie na pierwszą literę, a potrzeba porównania wszystkich wprowadzonych znaków

---

No to mój kod analizuje wszystkie znaki, czyli dokładnie to co chcesz. Jak pisałem zdecyduj tylko czy analizujesz dowolne położenie liter (includes) czy wyłącznie początek (startsWith).

---

Rozumiem, dowolne położenie liter jak najbardziej pasuje, więc "startsWith", pominę ! Zaraz spróbuje poukładać to sobie w głowie... a później przelać do swojej strony. Z góry dziękuje za pomoc 

---

Rzeczywiście kod działa świetnie i tak jak powinien. Jeszcze raz wielkie dzięki, leci NAJ :)

---

Spoko :) Gdyby coś było niejasne to pisz.