Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zmiana klasy po naciśnięciu klawisza
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
deha21
Robię autosuggest dla inputa. Mam taki problem, że po naciśnięciu klawisza w dół zaznacza się pierwszy z wyników autosuggest. Zaznacza się, czyli nadawana jest mu klasa .focus. Niestety po puszczeniu klawisza w dół czy w górę, klasa znika. A ja potrzebuję żeby ta pozycja była dalej zaznaczona. Poniżej przedstawiam trochę uproszczony kod (nie ma przesuwania po wynikach, natomiast jest funkcja zaznaczająca).
Kod
document.getElementsByName("search")[0].onkeydown = function(e) {

        // Liczba sugestii
        var count = document.getElementById("lista").children.length;

        // Usuwanie .focus wszystkich wyników sugestii
        for (i=0; i<count; i++) {
            document.getElementById("lista").getElementsByTagName("li")[i].setAttribute('class','');
        }

        // Funkcja zaznaczania danego wyniku sugestii
        function changeFocus(sel){
            document.getElementById("lista").getElementsByTagName("li")[sel].setAttribute('class','focus');
        }


    if (e.keyCode==40) {
            changeFocus(0); // Zaznacza pierwszą pozycję
    } else if (e.keyCode==38) {
        changeFocus(1); // Zaznacza drugą pozycję
    }
}
trueblue
https://jsfiddle.net/rea7ffhm/
Na pewno nie czyścisz klasy w innym momencie?
deha21
Na 100% nie czyszczę. Co może być nie tak w takim razie?
trueblue
Gdyby Ci się udało umieścić na jsfiddle.net niepoprawnie działający kod, wtedy możemy pomyśleć.
deha21
Cytat(trueblue @ 25.10.2016, 13:31:12 ) *
Gdyby Ci się udało umieścić na jsfiddle.net niepoprawnie działający kod, wtedy możemy pomyśleć.

Kurcze, wkleiłem kod do JSFiddle i działa. U mnie lokalnie nie działa...
trueblue
Ten sam kod (HTML+JS)? Brak błędów w konsoli?
deha21
Cytat(trueblue @ 25.10.2016, 13:48:21 ) *
Ten sam kod (HTML+JS)? Brak błędów w konsoli?

Dokładnie to samo w kleiłem co mam, w konsoli zero błędów :/

EDIT: Udało się
Okazało się, że miałem błąd w pobieraniu sugestii. Wczytywałem je z pliku przy każdym naciśnięciu litery w inpucie. Za każdym razem więc przy naciśnięciu strzałki w górę lub w dół od nowa wczytywało mi listę, kasując jednocześnie zaznaczenie. Teraz jest ok. Wystarczyło zrobić coś takiego:
Kod
if (e.keyCode!=40 && e.keyCode!=38) {
                        document.getElementById("lista").innerHTML = this.responseText;
                    }
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.