Desenvolvimento - ASP. NET
Suggest/Autocomplete com C#, Asp.Net e jQuery
Como podemos facilitar as buscas em nossos sites ou sistemas web? O suggest/autocomplete pode nos dar essa mão.
por Raphael Silva FerreiraNeste artigo veremos como implementar um suggest/autocomplete , ou seja, uma sugestão para pesquisa utilizando C#, Asp.NET e jQuery. Para iniciarmos o artigo vamos baixar a versão mais recente do plugin chamado jAutoComplete que pode ser baixado aqui.
Agora é a hora de colocarmos a mão na massa! Vamos abrir o Visual Studio e criar um projeto do tipo Web Site.
Em seguida vamos selecionar o tipo do projeto que será um Asp.NET Web Site, iremos chamá-lo de “Suggest” e definir o local onde ficará o projeto.
Criado nosso projeto vamos agora criar uma estrutura de pastas para separarmos os arquivos de javascript e os arquivos de estilo. Este passo é mais questão de organização (com exceção da pasta de imagens que deve ser criada), quem quiser poderá avançar a próxima etapa.
Para adicionar uma nova pasta, clique com o botão direito do mouse e em seguida na opção “New Folder”. Crie duas pastas “Css”, “Javascript. A solution deve ficar como a figura a seguir”:
Em seguida adicione a pasta Css o arquivo “jquery.autocomplete.css” e a pasta Script os arquivos do jQuery e o arquivo “jquery.autocomplete.min.js”.
Adicionados os arquivos, renomeie o arquivo “Default.aspx” para “Pesquisa.aspx”. Fiz isso só para ficar mais compreensível o funcionamento do autocomplete. Em seguida adicione mais um WebForm com o nome de “Suggest.aspx”.
Agora no source da Pesquisa.aspx adicione os scripts do jQuery,do AutoComplete e o arquivo do css. Adicione também um textbox, que dei o id “suggest”, além do código a seguir:
|
<script type="text/javascript"> $().ready(function() { $("#suggest").autocomplete("Suggest.aspx"); }); </script> |
O meu código HTML da Pesquisa.aspx ficou assim:
|
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <script type="text/javascript" src="Script/jquery-1.3.2.js"></script> <script type="text/javascript" src="Script/jquery.autocomplete.min.js"></script> <link href="Css/jquery.autocomplete.css" rel="stylesheet" type="text/css" /> <title>Suggest / Autocomplete</title> <script type="text/javascript"> $().ready(function() { $("#suggest").autocomplete("Suggest.aspx"); }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:textbox ID="suggest" runat="server"></asp:textbox> </div> </form> </body> </html> |
A tag “$("#suggest").autocomplete("Suggest.aspx");” é quem vai indicar ao jQuery qual o campo que possui o autocomplete e qual página que realmente fará o filtro da pesquisa.
Agora vamos ao codebehind da página Suggest.aspx, e adicionaremos o código a seguir ao Page_Load:
|
protected void Page_Load(object sender, EventArgs e) { /* ============================================= * ============================================= * ============================================= * ===== Apenas para efeito de teste ========= * ============================================= * ============================================= * =============================================*/ DataTable dt = new DataTable(); dt.Columns.Add("CAMPO_PESQUISA");
DataRow dr;
for (int i = 0; i < 10; i++) { dr = dt.NewRow(); dr["CAMPO_PESQUISA"] = "teste " + i.ToString(); dt.Rows.Add(dr); }
/* ============================================= * ============================================= * ============================================= * ===== Método do suggest a partir daqui ==== * ============================================= * ============================================= * =============================================*/
// Verifica se existe algo para procurar if (!string.IsNullOrEmpty(Request.QueryString["q"])) { string texto = Request.QueryString["q"];
// Se nenhum registro foi encontrado if (dt.Rows.Count == 0) Response.Write("Nenhum item foi encontrado!" + Environment.NewLine);
// Verifica nos registros for (int i = 0; i < dt.Rows.Count; i++) { // Se contém o que foi digitado retorna no suggest if (dt.Rows[i]["CAMPO_PESQUISA"].ToString().ToLower().Contains( texto.ToString().ToLower())) Response.Write(dt.Rows[i]["CAMPO_PESQUISA"].ToString() + Environment.NewLine); }
} } |
Como podem notar no código fiz um carregamento de dados num DataTable somente para mostrar o funcionamento. No lugar desse DataTable populado poderá vir um DataTable resultante de um método de pesquisa, por exemplo.
Notem ainda que não adicionei a verificação de postback (if (!IsPostBack)) isto porque como esta página servirá só para o suggest/autocomplete na hora em que a página “mãe” chamar a página de suggest deve responder imediatamente.
Agora basta executar a aplicação (pressione F5) e inicie a digitação da palavra “teste” para verificar o resultado.
Bom pessoal este é o suggest/autocomplete, espero que tenham gostado.
Até a próxima!
