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.
<datalist>
mas o suporte é limitado. Se escrever seu próprio autocomplete, posta como resposta.