Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Navegação entre li com a seta do teclado.

Bom dia pessoa, tudo bem?

Estou criando um input que tem um autocomplete, conforme eu vou digitando, uma div com uma lista não ordenada aparece e mostra sugestões de palavras possíveis em baixo do input. Eu gostaria de criar uma navegação com as setas do teclado para baixo e para cima entre as <li></li>, e com a tecla enter, selecionar o elemento que estiver em focus().

No projeto, estou usando Angular na versão 5. Alguém pode me dar uma direção de como fazer isso? Pois pesquisei e não consegui uma solução.

Muito obrigado!!!

2 respostas

Esse é o input

<input #assuntoEl class="form-control input-layout click-variaveis" placeholder="Escreva o Assunto" (keyup)="autoComplete($event)"/>

Essa é a div com a lista

<div #variaveisEl class="col-lg-16 ac-container container-variaveis">
    <ul #listaDeVariaveisEl class="ac-menu lista-variaveis">
        <li *ngFor="let variavel of variaveisAssuntoFiltradas; let indexLista = index" (click)="adicionarVariavel(variavel.chave)">
            <a class="row texto-variaveis">
                <div class="col-xs-5">{{variavel.nome}}</div>
                <div class="col-xs-7 text-uppercase">{{variavel.chave}}</div>
                <div class="col-xs-4 text-right text-muted pull-right text-capitalize">{{variavel.tipo}}</div>
            </a>
        </li>
    </ul>
</div>
solução

Resolvi, galera.

Usei um @ViewChildren do tipo TemplateRef<HTMLLIElement> para pegar os todas as LIs da lista, usei os KeyboardEvent pra pegar qual tecla estava usando e criei uma variável só para armazenar a posição do array em que eu estava.

Caso apertasse para cima, subtraía 1 na variável, caso apertasse pra baixo, somava 1 na variável. Para mostrar em qual elemento eu estava, adicionava uma classe no elemento atual e removia a classe do elemento anterior, e essa classe tinha um background-color diferente.

E ao apertar o Enter, eu pegava o elemento da lista na posição daquela variável que subtrai ou soma.

Vou finalizar a dúvida. Valeu!