Como teclado cima ou para baixo entre suspensa "opções"?

votos
13

Eu tenho um costume construído ajax [div] com base suspensa dinâmico.

I tem uma caixa [entrada] que; onkeyup, Corre uma pesquisa Ajax que retorna resultados em divs e são puxados para trás em usar innerHTML. Estes divs todos têm destaques onmouseoverassim, uma busca típica bem sucedida produz a seguinte estrutura (com o perdão do semi-code):

[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, eu estou perdendo as funções importantes por trás elementos HTML regulares. Eu não posso teclado cima ou para baixo entre opções.

Eu sei javascript lida com eventos de teclado, mas; Eu não tenho sido capaz de encontrar um bom guia. (Claro, a questão acompanhamento vai acabar por ser: posso usar <ENTER>para acionar esse onclickevento?)

Publicado 07/08/2008 em 16:58
fonte usuário
Em outras línguas...                            


2 respostas

votos
4

O que você precisa fazer é anexar ouvintes de eventos para o divcom id="results". Você pode fazer isso adicionando onkeyup, onkeydownetc. atribui ao divao criá-la ou você pode anexar estes usando JavaScript.

Minha recomendação seria que você use uma biblioteca AJAX como YUI , jQuery , Prototype , etc., por duas razões:

  1. Parece que você está tentando criar um Complete Auto controle que é algo que a maioria libaries AJAX deve fornecer. Se você pode usar um componente existente você vai salvar um monte de tempo.
  2. Mesmo se você não quiser usar o controle fornecido por uma biblioteca, todas as bibliotecas oferecem bibliotecas de eventos que ajudam a esconder as diferenças entre as APIs de evento fornecidos por diferentes browsers.

Esqueça addEvent, use o Utilitário de eventos do Yahoo! oferece um bom resumo do que uma biblioteca de evento deve fornecer para você. Tenho certeza de que as bibliotecas de eventos fornecido pelo jQuery, Prototype, et. al. fornecer recursos semelhantes.

Se esse artigo vai sobre sua cabeça ter um olhar para esta documentação em primeiro lugar e, em seguida, re-ler o artigo original (eu encontrei o artigo feito muito mais sentido depois de eu ter usado a biblioteca evento).

Um par de outras coisas:

  • Usando JavaScript lhe dá muito mais controle do que escrever onkeyupetc. atributos em seu HTML. A menos que você quiser fazer algo realmente simples eu iria usar JavaScript.
  • Se você escrever seu próprio código para manipular eventos de teclado a referência de código-chave boa é realmente útil.
Respondeu 17/08/2008 em 21:48
fonte usuário

votos
0

Em cima da minha cabeça, eu acho que você precisa para manter alguma forma de uma estrutura de dados no JavaScript que reflete os itens na lista suspensa atual. Você também precisará de uma referência para o item atualmente ativa / selecionada.

Cada vez que keyupou keydowné disparado, actualizar a referência para o produto activo / seleccionado na estrutura de dados. Para fornecer destacando informações sobre a interface do usuário, adicionar ou remover um nome da classe que é denominado via CSS com base em se o item está ativa / selecionada ou não.

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

Respondeu 07/08/2008 em 17:11
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more