Como pressionar o teclado para baixo ou para cima entre as “opções” suspensas?

Question

Eu tenho um menu suspenso dinâmico baseado em ajax [div] personalizado.

Eu tenho uma caixa [input] que; onkeyup, executa uma pesquisa Ajax que retorna resultados em divse são atraídos pelo uso innerHTML.Esses divtodos têm destaques onmouseover portanto, uma pesquisa típica bem-sucedida produz a seguinte estrutura (desculpe o semicódigo):

[input]
 [div id=results] //this gets overwritten contantly by my AJAX function
  [div id=result1 onmouseover=highlight onclick=input.value=result1]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
  [div id=result2 onmouseover=highlight onclick=input.value=result2]
 [/div]

Funciona.

No entanto, estou perdendo as funções importantes por trás dos elementos HTML regulares.Não consigo pressionar ou pressionar o teclado entre "opções".

Eu sei que o javascript lida com eventos de teclado, mas;Não consegui encontrar um bom guia.(É claro que a pergunta seguinte acabará sendo:eu posso usar <ENTER> para acionar isso onclick evento?)

Answer 1

O que você precisa fazer é anexar ouvintes de eventos ao div com id="results".Você pode fazer isso adicionando onkeyup, onkeydown, etc.atributos para o div ao criá-lo ou você pode anexá-los usando JavaScript.

Minha recomendação seria que você usasse uma biblioteca AJAX como YUI, jQuery, Protótipo, etc.por dois motivos:

1. Parece que você está tentando criar um Autocompletar controle que é algo que a maioria das bibliotecas AJAX deveria fornecer.Se você puder usar um componente existente, economizará muito tempo.
2. Mesmo que você não queira usar o controle fornecido por uma biblioteca, todas as bibliotecas fornecem bibliotecas de eventos que ajudam a ocultar as diferenças entre as APIs de eventos fornecidas por diferentes navegadores.

Esqueça addEvent, use o utilitário de eventos do Yahoo! fornece um bom resumo do que uma biblioteca de eventos deve fornecer para você.Tenho certeza de que as bibliotecas de eventos fornecidas por jQuery, Prototype, et.al.fornecem recursos semelhantes.

Se esse artigo passar pela sua cabeça, dê uma olhada em esta documentação primeiro e depois releia o artigo original (descobri que o artigo fazia muito mais sentido depois de usar a biblioteca de eventos).

Algumas outras coisas:

• Usar JavaScript oferece muito mais controle do que escrever onkeyup etc.atributos em seu HTML.A menos que você queira fazer algo muito simples Eu usaria JavaScript.
• Se você escrever seu próprio código para lidar com eventos de teclado, um boa referência de código-chave é realmente útil.

Answer 2

Pensando bem, acho que você precisaria manter alguma forma de estrutura de dados no JavaScript que reflita os itens na lista suspensa atual.Você também precisaria de uma referência ao item atualmente ativo/selecionado.

Cada vez keyup ou keydown for acionado, atualize a referência ao item ativo/selecionado na estrutura de dados.Para fornecer informações de destaque na IU, adicione ou remova um nome de classe estilizado via CSS com base no fato de o item estar ativo/selecionado ou não.

Além disso, isso não é grande coisa, mas innerHTML não é realmente padrão (veja createTextNode(), createElement(), e appendChild() para formas padrão de criação de dados).Você também pode querer ver como anexar manipuladores de eventos no JavaScript em vez de fazê-lo em um atributo HTML.