Help
http://sintchospir.com.br/img1.jpg
O AjaxControlToolkit's AutoCompleteExtender
Se estiver familiarizado com o Google Suggest, o conceito por trás do controle AutoComplete é o mesmo. À medida que você digita em um campo de texto, aparece uma drop down list que fornece sugestões sobre o que é que você está tentando digitar.
Aqui está a descrição fornecida pela documentação do toolkit.
Descrição
AutoComplete ASP.NET AJAX é um extensor que pode ser conectado a qualquer controle TextBox, e irá associar esse controle com um popup painel para exibir palavras que começam com o prefixo digitado no campo de texto.
O dropdown com palavras fornecidas por um serviço web é posicionado no canto inferior esquerdo da caixa de texto.
No exemplo acima, o texto está associado a um AutoCompleteExtender que puxa palavras que começam com o conteúdo da caixa de texto usando um web service.
Quando você já escreveu mais conteúdo do que o mínimo especificado no comprimento da palavra, um popup irá mostrar frases ou palavras que começam com o valor. Caching é ativado, assim, escrevendo o mesmo prefixo várias vezes resulta em apenas uma chamada para o serviço da web.
Para adicionar funcionalidade AutoComplete automática para a sua página, você precisa trabalhar o seu caminho através de três tarefas:
- Ligação do AutoComplete para extender o TextBox
- Implementar o ServiceMethod que retorna a lista de sugestões
- Defina as regras para o estilo do AutoComplete flyout
<ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" TargetControlID="myTextBox" ServiceMethod="GetCompletionList" ServicePath="AutoComplete.asmx" MinimumPrefixLength="2" CompletionInterval="1000" EnableCaching="true" CompletionSetCount="20" CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" DelimiterCharacters=";, :"> <Animations> <OnShow> ... </OnShow> <OnHide> ... </OnHide> </Animations> </ajaxToolkit:AutoCompleteExtender>
- TargetControlID - O controle TextBox onde o usuário digita o conteúdo que será automaticamente preenchido
- ServiceMethod - O método de serviço da web para ser chamado. A assinatura deste método deve coincidir com o seguinte:
[System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public string[] GetCompletionList(string prefixText, int count) { Note que você pode substituir "GetCompletionList" com um nome de sua escolha, mas o tipo de retorno e parâmetro nome do tipo deve corresponder exatamente. - ServicePath - O caminho para o web service que o extensor irá trazer a palavra \ frase de completo. Se isso não for fornecido, o método de serviço deve ser um page method.
- ContextKey - User/page a um contexto específico, opcional overload do método descrito por ServiceMethod / ServicePath. Se o contexto é utilizado, deve ter a mesma assinatura com um parâmetro adicional chamado contextKey tipo de string:
[System.Web.Services.WebMethod] [System.Web.Script.Services.ScriptMethod] public string[] GetCompletionList( string prefixText, int count, string contextKey) { ... } Note que você pode substituir "GetCompletionList" com um nome de sua escolha, mas o tipo de retorno e parâmetro nome e o tipo devem corresponder exatamente, incluindo o caso. - UseContextKey - Querendo ou não a propriedade ContextKey deve ser utilizada. Este será automaticamente ativado na propriedade ContextKey (no cliente ou no servidor). Se o contexto é utilizado, deve ter a mesma assinatura com um parâmetro adicional chamado contextKey do tipo string (como descrito acima).
- MinimumPrefixLength - Número mínimo de caracteres que deve ser digitado antes de receber sugestões do web service.
- CompletionInterval - Tempo em milissegundos quando o temporizador vai obter sugestões para utilizar o serviço da web.
- EnableCaching - cache lado cliente ativado.
- CompletionSetCount - Número de sugestões a serem obtidas a partir do web service.
- CompletionListCssClass - Css classe, que será utilizada para o preenchimento lista flyout estilo.
- CompletionListItemCssClass - Css classe que será usada para um item no estilo da lista AutoCompletar flyout.
- CompletionListHighlightedItemCssClass - Css classe, que será utilizada para um estilo AutoComplete item na lista flyout.
- DelimiterCharacters - Especifica um ou mais caracteres usado (s) para separar as palavras. O texto do AutoComplete textbox é simbolizado utilizando esses caracteres.
- FirstRowSelected - Determina se a primeira opção na lista AutoComplete será selecionada por padrão.
- Animations - animações Generica para estender o AutoComplete. Veja Usando o walkthrough Animações.
- OnShow - O OnShow será tocado cada vez que a lista AutoComplete é exibida. A lista será posicionada corretamente, mas escondida. A animação pode usar <HideAction Visible="true" /> para exibir a lista juntamente com quaisquer outros efeitos visuais.
- OnHide - O OnHide será cada vez que a lista AutoComplete está escondida.
O AutoCompletar Extender para TextBox
Nós começamos com a adição de uma TextBox regular à sua página. O recurso de autocompletar é adicionando ao controle AutoComplete para a página e apontando-o (a definição TargetControlID) com a do TextBox. Nada de especial aqui, isso é o mesmo que todos os outros controles extender.
http://conteudo.imasters.com.br/10739/img2.jpg
Implementar o ServiceMethod
A lógica em que o servidor retorna as nossas sugestões baseadas nos caracteres que o usuário tenha digitado no campo de texto. Podemos colocar esta lógica dentro de um ou PageMethod um WebMethod. No entanto, para o controle AutoComplete funcionar de forma adequada, o método tem de assumir uma das seguintes assinaturas (você pode mudar o nome do método, mas o parâmetro nome e o tipo de retorno deve corresponder exatamente).
http://sintchospir.com.br/img3.jpg
O parâmetro prefixText é o texto que o usuário digitou até agora. Count é o número máximo de sugestões para retornar. O parâmetro final contextKey lhe permite fornecer qualquer usuário ou página extra ServiceMethod no seu contexto específico se precisar. O retorno é uma string tipo array que contém as sugestões. Abaixo está o ServiceMethod tenho implementado.
http://sintchospir.com.br/img4.jpg
http://sintchospir.com.br/img5.jpg
Eu queria que a minha rotina para fornecer sugestões para a coluna somente se o usuário tenha selecionado na lista suspensa. Estou usando o parâmetro contextKey para enviar esta bits adicionais no âmbito da informação de volta à minha ServiceMethod. Então, se você olhar para a captura de tela abaixo, eu digito 'be' no campo de texto e ao controle AutoComplete proferida uma caixa para baixo com os três seguintes valores: Berlim, Beaverton e Beverly Hills. Antes do drop-down foi proferida a seguinte seqüência de operações:
1. O controle AutoComplete invocou o meu GetCompletionList ServiceMethod, passando os seguintes valores: prefixText: 'be', count: 5, contextKey: «cidade»
2. ServiceMethod processou o pedido e seleccionou o top 5 dos municípios distintos no meu conjunto de dados que comecem com o prefixo 'be' (que aconteceu aqui foram apenas 3). 3. 3 cidades ( 'Berlin', 'Beaverton »,« Beverly Hills ») são devolvidos ao controle AutoComplete de volta no cliente
4. Depois do recebimento da lista de sugestões, o controleo flyout, fornecendo ao utilizador com as sugestões. http://sintchospir.com.br/img6.jpg
Denominando o AutoCompletar flyout
Agora que os controles estão estruturados e os nossos ServiceMethod implementados, podemos centrar-nos na nossa sugestão de styling flyout. O controle AutoComplete injeta um UL / LI estrutura para a página para a sugestão de itens e fornece-o com 3 classes CSS que você pode usar para controlar o estilo.
- CompletionListCssClass;
- CompletionListItemCssClass;
- CompletionListHighligtedItemCssClass;
http://sintchospir.com.br/img7.jpg
