Busca e autocomplete no TextBox

Olá pessoal, hoje eu vou mostrar como fazer uma busca que ajude o usuário no momento da busca. Eu gosto de mostrar de forma prática usando uma tecnologia específica.

Utilizado:

Ferramenta: Visual Studio

Linguagem: C#

Banco de dados: SQL Server

Plataforma: ASP.NET

Framework: .NET e JQuery (JavaScript)

O problema:

O que eu precisava fazer era ajudar o cliente no momento da busca. Precisa desenvolver uma ferramenta que influenciasse o usuário no momento da busca, mostrando os dados relevantes que estavam em nosso banco de dados, isto é, precisava fazer o autocomplete para mostrar abaixo do campo texto do usuário. Em momento algum a ferramenta precisava retirar o que o usuário digitou mas sim sugerir opções para a busca dar um melhor resultado. Tudo isso baseado no que existe no banco de dados do nosso software.

Para fazer isso, precisei pesquisar as várias tecnologias e ao mesmo tempo considerar o tempo de execução ou o tempo de processamento na busca de dados. Precisei considerar um cliente que não tema Internet muito boa. E esse final que definiu pra mim o uso do JQuery. Usando o JavaScript que executa no browser foi uma melhor opção, pois não precisa de Internet forte para buscar todos os dados no banco de dados. Existe uma outra solução que utiliza a tecnologia Web Service, mas o tempo e a busca pode levar muito tempo dependendo da conexão de Internet do usuário.

A busca foi feita antes do carregamento da página e só é mostrada de acordo com a digitação do usuário. Existe uma variável com todos os termos buscáveis para o usuário. Depois de mostrado o problema, vamos para a prática.

Prática

O primeiro passo foi importar os arquivos .Js na página de busca. Os arquivos são da linguagem de interpretação chamada JavaScript, diferente da linguagem de compilação Java. O code 1 mostra os arquivos importados.

Code 1- Importando os arquivos

Esses arquivos são essenciais para o perfeito funcionamento da busca dinâmica ao usuário. O primeiro arquivo é de estilo, isto é, ele é responsável por mostrar um tipo de fonte, tamanho, cor e tudo mais.

O próximo passo foi fazer a busca no banco de dados usando a linguagem C#. Essa busca precisa ser retornada de uma forma diferente para se conectar ao script em JavaScript. Você deve estar acostumado em fazer uma busca que retorna um tipo de objeto como uma classe, mas nesse caso, precisei retornar uma string grande formata e separada por vírgula. Os dados do DataTable foram tratados para funcionar corretamente.

Como a busca dos dados no banco é bem particular, vou mostrar apenas o método que faz o tratamento dos dados retornados do banco dentro do objeto DataTable. Existem vários artigos e vídeos meus mostrando como buscar do banco de dados, você pode ver no site www.ecode10.com ou www.mauriciojunior.org. O code 2 mostra como fazer o tratamento dos dados.

Code 2 - Tratando os dados e retornando string.

public string searchDistinctNomeEmpresa()

{

string _lista = "";

try

{

DataTable dt = _dao.searchDistinctNomeEmpresa();

for (int i = 0; i < dt.Rows.Count; i++)

{

if (String.IsNullOrEmpty(_lista))

_lista += "\"" + dt.Rows[i]["NomeFantasia"].ToString() + "\"";

else

_lista += ", \"" + dt.Rows[i]["NomeFantasia"].ToString() + "\"";

}

return _lista;

}

catch (Exception ex)

{

throw ex;

}

Note que depois de recebido os valores da classe _DAO, o objeto DataTable estava preenchido. O próximo passo foi fazer um FOR que tratasse os dados colocando vírgula entre os valores. No final, a lista de dados foi retornada para a página.

Passando para a classe .cs da página um método foi criado para consumir o método searchDistinctNomeEmpresa() criado. A variável chamada _lista foi declarada na classe como pública e o resultado foi atribuído para ela. Veja o code 3.

Code 3 - Preenchendo a variável Lista.

public string _lista = "";

private void preencherCampoTexto()

{

EmpresaBRL brl = new EmpresaBRL();

_lista = brl.searchDistinctNomeEmpresa();

}

Ainda falta criar a parte de layout HTML e C# na página .ASPX. Pra isso, é necessário utilizar uma função do JavaScript jQuery focada no autocomplete. Veja o code 4.

O próximo passo é criar uma função com $ (cifrão). Depois existe uma variável chamada avaliableTags que recebe os valores da lista entre colchetes. A linha seguinte é destinada ao campo texto, isto é, o campo TextBox que o usuário usará para digitar. Note que o campo chamada txtBuscar. É necessário indicar o nome dele mais a propriedade ClientID. Fechando o parâmetro, chame o método autocomplete com a fonte dos dados chamada source. Veja o code 4.

Code 4 - Colocando o script na página ASPX.

$(function() {

var availableTags = [ <%= _lista %>];

$("#<%= txtBuscar.ClientID %>").autocomplete({

source: availableTags

});

</script>

<asp:TextBox ID="txtBuscar" runat="server" CssClass="input" MaxLength=“250"></asp:TextBox>

O resultado de todo esse código está na figura 1.