Autocompletar Suspensa com Linkbuttons - ou "AJAX gone wild"

Question

Ok, então eu quero um recurso de autocompletar suspensa com linkbuttons como seleções.Assim, o usuário coloca o cursor na "caixa de texto" e é celebrado com uma lista de opções.Eles podem começar a escrever para restringir a lista ou selecione uma das opções na lista.Assim que clicar (ou enter) o conjunto de dados este é vinculada ao serão filtradas pela seleção.

Ok, isso é tão fácil como envolvendo-a com uma AJAX autocompletar em torno de um buraco?Não?(Por favor?)

Answer 1

Este widget pode ser feito com três itens:uma entrada de texto, botão de entrada, e uma lista não ordenada para manter os resultados.

 __________  _
|__________||v|__             <-- text and button
  |              |            <-- ul (styled to appear relative to text input)
  |              |
  |              |
  |______________|

ul mostrado em:

• 'keyUp" evento de entrada de texto (se o valor for não vazio)
• 'clique em' evento do botão de entrada (se actualmente não visível)

ul escondidos em:

• 'clique em' evento do botão de entrada (se actualmente visível)
• 'clique em' caso de itens de lista

Quando o ul é mostrado ou "keyUp" evento do texto de entrada é acionado uma chamada AJAX para o servidor precisa ser feito para atualizar a lista.

Em caso de sucesso os resultados devem ser colocados na ul.Ao criar a lista de itens, eles devem ter um 'clique em' eventos ligados a eles, que define o texto e o valor de entrada e oculta a ul (poderá ter de adicionar um link dentro da li para anexar o evento).

A parte mais difícil é realmente o CSS.O JavaScript é simples, especialmente com uma ótima biblioteca, como protótipo que oferece suporte a vários navegadores.

Você provavelmente vai querer o apoio de alguns IDs de itens, então você pode adicionar alguns escondidos entradas para cada item da lista com a identificação e avançar para a introdução de texto para armazenar os itens selecionados ID.

Answer 2

Você vai ter que lidar com o evento OnSelectedIndexChanged de sua lista pendente para revincular o seu conjunto de dados com base na selecção de utilizadores.Se você deseja que a filtragem de acontecer em um asynch postback, envolva o conjunto de dados (ou datagrid eu estou supondo) e a sua queda para baixo em um UpdatePanel.Essa é uma maneira de fazê-lo de qualquer maneira.

Answer 3

Eu não sou inteiramente certo o que você quiser, mas o Ra-Ajax AutoCompleter definitivamente tem apoio para ter "controles" dentro de si.Você pode ver que na caixa de pesquisa na Empilhados na verdade (canto superior direito) onde nós estamos usando os links.Mas isso também poderia ser LinkButtons se quiser...

Aviso de isenção;Eu trabalho com Ra-Ajax...

Answer 4

Na minha opinião, você não deve usar o AJAX para isso.

aqui está o porquê:

(1) Em foco:TODAS as opções que ele pode selecionar são exibidos na lista suspensa.Isso significa que todas as opções possíveis já são enviadas para o cliente.

(2) Se o usuário digitar algo, o número de entradas na lista são filtrados para correspondência.Isso pode ser feito facilmente no lado do cliente.Sendo ajax y e indo de volta para o servidor neste momento só vai abrandar as coisas.

phpguru.org tem um controle que é "quase exatamente' o que você precisa:

http://www.phpguru.org/static/AutoComplete.html#demo

Ele é um pouco diferente do que você precisa em que ele mostra o menu suspenso clique duplo em vez de em foco.Que deve ser bastante fácil de modificar.

Espero que isso ajude.