0

Eu fiz uma busca de cidades usando Javascript.

Tem um campo texto no qual o usuário digita o nome da cidade. E ao passo que ele vai digitando as letras, as cidades respectivas que começam com aquela letra aparecem em uma ul > li embaixo do campo para o usuário clicar.

Tem como usar as setas para baixo e para cima do teclado para navegar entre as cidades e quando o foco estiver em cima do li apertar enter para selecionar a cidade ?

JS

if(str != ''){
    box_div.show();
    box_ul.html('');
    $.each(data, function(i, val){
        box_ul.append("<li id='"+val.id+"'>"+val.cidade+", "+val.estado+"</li>");
    });
}
var linhas = $('div.resultados-cidades > ul > li');
var cont   = linhas.length;

if(40 == event.keyCode )
    active = active >= (cont - 1) ? 0 : active + 1;
else if(38 == event.keyCode )
    active = ( active <= 0 ) ? cont - 1 : active - 1;

var a = linhas.removeClass('hover').eq(active).addClass('hover');

Nessa função ele só navega entre o primeiro e o último.

5
  • 1
    Da para montar o html pra ficar mais fácil de entender ? Commented 11/03/2016 às 17:51
  • Tem vários plugins de autocomplete, você quer fazer "na unha", é isso? Commented 11/03/2016 às 17:59
  • Quero fazer na unha, não precisa de um plugin pra isso... Commented 11/03/2016 às 17:59
  • 1
    Então ta. Eu ia recomendar <datalist> mas o suporte é limitado. Se escrever seu próprio autocomplete, posta como resposta. Commented 11/03/2016 às 18:03
  • Meu autocomplete já está pronto, mas não é ele o problema. O problema é minha navegação por seta. Commented 11/03/2016 às 18:03

1 Resposta 1

1

Veja se isso resolve:

$("#inputCidade").keydown(function(e) {
    if (e.keyCode == 13) { // enter
        if ($(".cidades").is(":visible")) {
            opcaoEscohida();
        } else {
            $(".cidades").show();
        }
        menuOpen = !menuOpen;
    }
    if (e.keyCode == 38) { // pra cima
        var selected = $(".selected");
        $(".cidades li").removeClass("selected");
        if (selected.prev().length == 0) {
            selected.siblings().last().addClass("selected");
        } else {
            selected.prev().addClass("selected");
        }
    }
    if (e.keyCode == 40) { // pra baixo
        var selected = $(".selected");
        $(".cidades li").removeClass("selected");
        if (selected.next().length == 0) {
            selected.siblings().first().addClass("selected");
        } else {
            selected.next().addClass("selected");
        }
    }
});
function opcaoEscohida() {
    $("#inputCidade").val($(".selected a").text());
    $(".cidades").hide();
}

Fiddle: https://jsfiddle.net/7fzqps3o/1/

1
  • Seu código só funciona no primeiro e no último elemento da lista. Commented 15/03/2016 às 11:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .