jQuery auto complete em ASP.NET

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (1)

Bem vindo a mais um artigo sobre jQuery nesse poste vou aborda o plugin auto complete, que é super bacana e muito útil para nos não ficar cadastrando nada repetindo no banco ajudar preencher campos facilitar em busca etc.

Abordaremos nesse artigo o plugin auto complete, que é muito útil para não ficarmos cadastrando nada repetido no banco, facilitando o preenchimento do campo de busca e etc.

A Figura 1mostra um Preview do que nós vamos criar.

Figura 1. Auto complete

Vamos começar criando um novo projeto do tipo ASP.NET Web Application. Em seguida vamos criar uma pasta com nome Scriptonde colocaremos todos os plugins necessários para o funcionamento do nosso projeto auto complete.

Após adicionar os plugins na pasta vamos abrir a página Default.aspx é importa nossos plug-ins. Em seguida começaremos a codificar nosso código jQuery, que é bem simples, como mostra a Listagem 1.

Listagem 1. Codificação do jQuery autocomplete

01   <head>
02     <title>Autocomplete using jQuery Plugintitle>
 
03        <script src="Scripts/jquery-latest.js" type="text/javascript"></script>
04        <link rel="stylesheet" href="Scripts/jquery.autocomplete.css" type="text/css" />
 
05        <script type="text/javascript" src="Scripts/jquery.autocomplete.js"></script>
06        <script type="text/javascript">
 
07          $(document).ready(function () {
08            $("#frame").autocomplete("AutocompleteData.ashx");
 
09          });
10        </script>
 
11    
12   </head>

Veja que colocamos o ID do nosso textbox no evento autocomplete do jQuery e depois chamamos a nossa página AutocompleteData.ashx, que é do tipo Generic Handler. Esta recebe o que foi digitado no textbox é passa por QueryString a primeira letra que digitamos. Dentro da página handler nós recuperamos por HTTP.Context.QueryString esse parâmetro que foi passado pelo plugin e o utilizamos no Select.

Vamos agora criar uma página do tipo Generic Handler com o nome AutocompleteData.ash, como mostra o código da Listagem 2.

Listagem 2. Página do AutoComplete

01   <%@ WebHandler Language="C#" %>
02    
 
03   using System;
04   using System.Web;
 
05   using System.Data.SqlClient;
06   using System.Configuration;
 
07   using System.Collections.Generic;
08    
 
09   public class AutocompleteData : IHttpHandler {
10    
 
11     public void ProcessRequest (HttpContext context) {
12       string firstname = context.Request.QueryString["q"];
 
13      string sql = "SELECT ProductName FROM [Alphabetical list of products]   where ProductName like '" + firstname + "%' ; ";
14      string conexao = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ToString();
 
15        using (SqlConnection connection = new SqlConnection(conexao))
16        using (SqlCommand command = new SqlCommand(sql, connection))
 
17       {
18         connection.Open();
 
19    
20         using (SqlDataReader reader = command.ExecuteReader())
 
21         {
22            List<string> list = new List<string>();
 
23            while (reader.Read())
24           {
 
25             context.Response.Write(reader[0].ToString() + Environment.NewLine);
26            }
 
27          }
28       }
 
29    }
30    
 
31    public bool IsReusable {
32      get {
 
33        return false;
34      }
 
35    }
36    
 
37   }

Não esqueça de alterar a string de conexão: para o nosso exemplo estamos usando o banco Northwind, mas você pode usar qualquer outro.

Espero que tenham gostado.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?