Criando um Google Suggest com o controle AutoComplete

O controle AutoComplete pode ser usado para fornecer capacidades de filtragem mais inteligentes para a nossa tabela de dados. A idéia geral aqui é permitir que o usuário selecione uma coluna a partir de um filtro de drop down list. Vamos usar o AjaxControlToolkit’s, AutoComplete para sugerir alguns valores para o filtro. Você pode ver isso na tela abaixo. Selecionado ‘Cidade’ no menu suspenso e, em seguida, digitar ‘be’ no campo de texto e, como mágica, as 3 cidades no conjunto de dados que tenho no menu e que iniciam com ‘be’ aparecem.

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.

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).

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.

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.

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;

Foram usadas as seguintes regras estilo, o e HighlightText destaque para as cores realçadas classes.