Publicado em 1 de abr.

Auto complete + JQuery + ASP

Este tutorial consiste em sugir nomes quando estiver preenchendo um campo, como por exemplo o do google

/applications/core/interface/imageproxy/imageproxy.php?img=http://mateus.anjohost.net/auto_complete/exemplo.jpg&key=46b4f4685c49f0776723fea7f7d8dc476c193cc3dd3246dd28ce007919ab9f51" alt="Imagem Postada" />

Vamos começar pelo banco de dados

Banco de dados que estou utilizando é o Microsoft SQL SERVER 2008

Código para criação da tabela:

create table contatos (
 codigo int not null,
 nome int not null,
 telefone varchar(11) null,
 email varchar(100) null,
)

Agora vamos inserir alguns dados manualmente

INSERT INTO agenda(codigo, nome, telefone, email) VALUES (1, 'Mateus', '4833552211','mateusgamba@gmail.com')
INSERT INTO agenda(codigo, nome, telefone, email) VALUES (2, 'Monique', '4888040521','monique@hotmail.com')
INSERT INTO agenda(codigo, nome, telefone, email) VALUES (3, 'Marcelo', '4833552123','marcelo@gmail.com')
INSERT INTO agenda(codigo, nome, telefone, email) VALUES (4, 'Gledson', '4833122378','gledson@yahoo.com')

Agora com o banco de dados pronto, vamos precisar dos seguintes arquivos

Framework JQuery 1.3.2

Plugin autocomplete

O framework pode se utilizar a última versão, mas como eu estou acustumado e todos os meus códigos estão nessa versão, então é o qual vou utilizar.

Ao baixar o plugin, vai vim um pacotão de coisas, bem interessante para dar uma estuda mais afundo.

Mas o que irei utilizar desse pacotão é jquery.autocomplete.js e jquery.autocomplete.css.

A estrutura desse exemplo ficara da seguinte maneira:

/applications/core/interface/imageproxy/imageproxy.php?img=http://mateus.anjohost.net/auto_complete/estrutura_arquivos.jpg&key=6fe655138f467464f99d40518142f7f03e774b7762762d0e027a7cf0e5807945" alt="Imagem Postada" />

default.asp é a página que terá o campo autocomplete e o página lista_nomes.asp é onde aparecera os resultados

A pesquisa que iremos fazer é do campo nome da tabela contatos.

default.asp

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Auto Complete</title>

 <link href="jquery.autocomplete.css" type="text/css" rel="stylesheet" />
 <script src="jquery-1.3.js" language="javascript"></script>
 <script src="jquery.autocomplete.js" language="javascript"></script>

 <script type="text/javascript" language="javascript">

 $(document).ready(function(){
 //Ao digitar executar essa função
 $("#nome").focus().autocomplete("lista_nomes.asp",{
 minChars: 0 //Número minimo de caracteres para aparecer
 , matchContains: true //Sempre aparecer somente os que tem relação ao digitado
 , scrollHeight: 220 //altura da lista dos nomes
 , selectFirst: false //vim como padrão o primeiro selecionado
 })

 })

 </script>
 </head>

 <body>
 <input name="nome" id="nome" type="text" />
 </body>
</html>

lista_nomes.asp

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
' Parametros de Conexao ao Banco
SERVIDOR_DO_BANCO = "localhost"
NOME_DO_BANCO = "agenda"
USUARIO_DO_BANCO = "mateus"
SENHA_DO_BANCO = "123456"

' Conexao com o Banco de dados
Dim conexao
Set conexao = Server.CreateObject("ADODB.Connection")
conexao.Open = "Provider=MSDASQL;Driver={SQL Server};Server="&SERVIDOR_DO_BANCO&";Database="&NOME_DO_BANCO&";UID="&USUARIO_DO_BANCO&";PWD="&SENHA_DO_BANCO&";" 'Efetua a Conexao

' Pega valor
valor = Request.QueryString("valor")

' SQL de pesquisa

	sql = "SELECT nome FROM contatos WHERE UPPER(nome) like UPPER('%"&valor&"%') AND nome IS NOT NULL GROUP BY nome ORDER BY nome ASC"
	Set query = conexao.execute(sql)
	Do While Not query.eof
 ' Lista o nome
 response.write query("nome")&"|"&query("nome")&vbCrLf
 query.movenext
	Loop

	Set query = Nothing
	Set conexao = Nothing

Na linha 22 temos dois parametros separados por "|"

O primeiro parâmetro é o item que aparece na pesquisa, por exemplo, se trocar nome pelo código, vai aparecer o código de vez o nome, ou seja, é o resultado

Já o segundo parâmetro não serve para nada, eu até olhei até no código do plugin para confirmar

Como padrão eu sempre deixo repetido os dois parâmetros.

Prontinho

Para o Download

Para mais conteudo, acesse meu blog http://mateusgamba.wordpress.com

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...

INSERT INTO agenda(codigo, nome, telefone, email) VALUES (1, 'Mateus', '4833552211','mateusgamba@gmail.com') INSERT INTO agenda(codigo, nome, telefone, email) VALUES (2, 'Monique', '4888040521','monique@hotmail.com') INSERT INTO agenda(codigo, nome, telefone, email) VALUES (3, 'Marcelo', '4833552123','marcelo@gmail.com') INSERT INTO agenda(codigo, nome, telefone, email) VALUES (4, 'Gledson', '4833122378','gledson@yahoo.com')

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Auto Complete</title> <link href="jquery.autocomplete.css" type="text/css" rel="stylesheet" /> <script src="jquery-1.3.js" language="javascript"></script> <script src="jquery.autocomplete.js" language="javascript"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ //Ao digitar executar essa função $("#nome").focus().autocomplete("lista_nomes.asp",{ minChars: 0 //Número minimo de caracteres para aparecer , matchContains: true //Sempre aparecer somente os que tem relação ao digitado , scrollHeight: 220 //altura da lista dos nomes , selectFirst: false //vim como padrão o primeiro selecionado }) }) </script> </head> <body> <input name="nome" id="nome" type="text" /> </body> </html>

sql = "SELECT nome FROM contatos WHERE UPPER(nome) like UPPER('%"&valor&"%') AND nome IS NOT NULL GROUP BY nome ORDER BY nome ASC" Set query = conexao.execute(sql) Do While Not query.eof ' Lista o nome response.write query("nome")&"|"&query("nome")&vbCrLf query.movenext Loop Set query = Nothing Set conexao = Nothing