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

pytanie zadane 12 lipca 2018 w JavaScript przez Yashe Dyskutant (7,720 p.)

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

2	komentarz 12 lipca 2018 przez ScriptyChris Mędrzec (190,190 p.) Pokaż kod, którym to sprawdzasz.

komentarz 12 lipca 2018 przez Yashe Dyskutant (7,720 p.)
edycja 12 lipca 2018 przez Yashe

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 "_"

komentarz 12 lipca 2018 przez ScriptyChris Mędrzec (190,190 p.)

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.

komentarz 12 lipca 2018 przez Yashe Dyskutant (7,720 p.)

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

1	komentarz 12 lipca 2018 przez xmentor Nałogowiec (49,520 p.) do zdarzenia input możesz dorzucić debounce(dla drobnej optymalizacji)

komentarz 12 lipca 2018 przez MrxCI Dyskutant (8,260 p.)

A StartWith()?

1 odpowiedź

odpowiedź 12 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 12 lipca 2018 przez Yashe

Najlepsza

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"]

komentarz 12 lipca 2018 przez Yashe Dyskutant (7,720 p.)

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ć

komentarz 12 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

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:

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

komentarz 12 lipca 2018 przez Yashe Dyskutant (7,720 p.)

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

1	komentarz 12 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.) 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).

komentarz 12 lipca 2018 przez Yashe Dyskutant (7,720 p.)

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