Olá
Pelo que percebi e pelo pessoal que entrou em contato, o meus post sobre Autocomplete ficou desatualizado e com os links quebrados, então resolvi atualizar ele e acrescentar algumas coisas novas e interessantes.
A imagem a seguir mostrar um exemplo de aonde queremos chegar:
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 varchar(100) not null, telefone varchar(11) null, email varchar(100) null ) go
Agora vamos inserir alguns dados manualmente
INSERT INTO contatos(codigo, nome, telefone, email) VALUES (1, 'Mateus', '4833552211','mateusgamba@gmail.com') INSERT INTO contatos(codigo, nome, telefone, email) VALUES (2, 'Monique', '4888040521','monique@hotmail.com') INSERT INTO contatos(codigo, nome, telefone, email) VALUES (3, 'Marcelo', '4833552123','marcelo@gmail.com') INSERT INTO contatos(codigo, nome, telefone, email) VALUES (4, 'Gledson', '4833122378','gledson@yahoo.com')
Com o banco de dados pronto, vamos dar início ao desenvolvimento.
Vamos precisar do framework Jquery e do plugin Autocomplete com seu CSS
Agora irei mostrar 3 exemplos interessantes e diferentes de usar o Autocomplete com Jquery.
1 – Exemplo mais simples:
exemplo01.asp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Complete - Exemplo 1</title>
<link href="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js" language="javascript"></script>
<script src="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
//Ao digitar executar essa função
$("#nome").focus().autocomplete("exemplo01_nomes.asp")
});
</script>
</head>
<body>
<h1>Autocomplete com Jquery em ASP - Exemplo 1</h1>
Nome: <input name="nome" id="nome" type="text" autocomplete="off" />
</body>
</html>
exemplo01_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
' SQL de pesquisa
sql = "SELECT codigo, nome FROM contatos ORDER BY nome ASC"
Set query = conexao.execute(sql)
While Not query.eof
' Lista o nome
response.write query("nome")&"|"&query("codigo")&vbCrLf
query.movenext
Wend
Set query = Nothing
Set conexao = Nothing
%>
Esse primeiro exemplo mostra de uma forma simples como utilizar o autocomplete, não há necessidades de passar parâmetros, pois é carregado os 10 primeiros nomes da resposta do SQL em uma lista do javascript, assim não precisando consultar no banco de dadis a cada caracter digitado.
2 – Exemplo mais completo
exemplo02.asp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Complete - Exemplo 2</title>
<link href="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js" language="javascript"></script>
<script src="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
//Ao digitar executar essa função
$("#nome").focus().autocomplete("exemplo02_nomes.asp",{
minChars: 1 //Número mínimo de caracteres para aparecer a lista
, matchContains: true //Aparecer somente os que tem relação ao valor digitado
, scrollHeight: 220 //Altura da lista dos nomes
, selectFirst: true //Vim o primeiro da lista selecionado
, mustMatch: true //Caso não existir na lista, remover o valor
, delay: 0 //Tempo para aparecer a lista para 0, por padrão vem 200
});
});
</script>
</head>
<body>
<h1>Autocomplete com Jquery em ASP - Exemplo 2</h1>
Nome: <input name="nome" id="nome" type="text" autocomplete="off" />
</body>
</html>
exemplo02_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 Conexão
valor = Replace(Request.QueryString("q"),"'","") 'Parâmetro do campo nome, o "q" é padrão do componente autocomplete
' SQL de pesquisa
sql = "SELECT codigo, nome FROM contatos where nome like '"&valor&"%' ORDER BY nome ASC"
Set query = conexao.execute(sql)
While Not query.eof
' Lista o nome
response.write query("nome")&"|"&query("codigo")&vbCrLf
query.movenext
Wend
Set query = Nothing
Set conexao = Nothing
%>
Esse exemplo permite trazer somente os nomes que existem no banco de dados, caso não exista, é limpado o campo automaticamente.
3 – Exemplo retornando valores
exemplo03.asp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Complete - Exemplo 3</title>
<link href="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js" language="javascript"></script>
<script src="http://jquery.bassistance.de/autocomplete/jquery.autocomplete.js" language="javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
//Ao digitar executar essa função
$("#nome").focus().autocomplete("exemplo03_nomes.asp",{
minChars: 1 //Número mínimo de caracteres para aparecer a lista
, matchContains: true //Aparecer somente os que tem relação ao valor digitado
, scrollHeight: 220 //Altura da lista dos nomes
, selectFirst: true //Vim o primeiro da lista selecionado
, mustMatch: true //Caso não existir na lista, remover o valor
, delay: 0 //Tempo para aparecer a lista para 0, por padrão vem 200
});
//Quando selecionar valor pegar retorno. O retorno nesse caso são: Nome|Código
$("#nome").result(function(event, retorno) {
if (retorno==undefined)
$("#codigo").val("");
else
$("#codigo").val(retorno[1]);
});
});
</script>
</head>
<body>
<h1>Autocomplete com Jquery em ASP - Exemplo 3</h1>
Nome: <input name="nome" id="nome" type="text" autocomplete="off" />
<br/>
<br/>
Código: <input name="codigo" id="codigo" type="text" disabled="disabled" />
</body>
</html>
exemplo03_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 Conexão
valor = Replace(Request.QueryString("q"),"'","") 'Parâmetro do campo nome, o "q" é padrão do componente autocomplete
' SQL de pesquisa
sql = "SELECT codigo, nome FROM contatos where nome like '"&valor&"%' ORDER BY nome ASC"
Set query = conexao.execute(sql)
While Not query.eof
' Lista o nome
response.write query("nome")&"|"&query("codigo")&vbCrLf
query.movenext
Wend
Set query = Nothing
Set conexao = Nothing
%>
Esse exemplo é bem semelhante ao Exemplo 2, a única diferença é que retorna o codigo do contato para o campo Código. Caso não exista o valor digitado, além de limpar o campo Nome é limpado o campo Código também.
Clique aqui e baixe os exemplos
É isso ai pessoal.
Até a próxima.
#1 by Paulo on 29 29UTC Abril 29UTC 2011 - 13:46
Muito bom. Ficou ótimo!
Tenho uma tabela com mais de 650 mil registros. Funcionou bem, mas ele demora uns 5 segundos pra retornar a lista. Tem algum jeito de melhorar isso?
Obrigado.
#2 by mateusgamba on 29 29UTC Abril 29UTC 2011 - 14:28
Opah
Essa demora deve ser pela consulta na tabela, acredito que se você colocar um TOP 10 na consulta do SQL irá ficar mais rápido. Senão não me engano, ele traz somente os 10 primeiros registro da tabela por padrão.
Qualquer coisa, da outro toque por aqui, que ai verifiquemos melhor.
Grato.
#3 by marcel on 18 18UTC Julho 18UTC 2011 - 11:02
Parabens mateus, muito bom o post sobre jquery, vai ajudar muita gente a melhorar os seus sites.
#4 by to feliz demais!!!! on 27 27UTC Julho 27UTC 2011 - 00:34
Putz que lindo, funcionou liso!
Amigo se eu fosse mulher eu lhe daria um beijo!!!
valeu eu te amo!
#5 by Rodrigo de Oliveira on 19 19UTC Agosto 19UTC 2011 - 16:18
Olá Matheus, tudo bem?
òtimo post, funcionou perfeitamente aqui.
Agora queria aproveitar e fazer uma coisa
Tenho um formulário de cliente e na inclusão quando o usuário vai colocar razao social ele chama o autocomplete, com a relação de clientes já cadastrados.
Com isto, o usuário poderá ser auxiliado para ver se já foi incluído o cliente.
Pois bem, acontece que caso não existe, ele limpa o campo.
Já tentei alterando a opção mustMatch para false, mas não funcionou.
Queria saber se você sabe como resolver isto. Ou então se você tem algo/alguma sugestão para esta necessidade, sendo que deve-se ser feito a verificação se já existe no próprio form/pagina,
Desde já agradeço sua atenção.
#6 by paulo on 9 09UTC Setembro 09UTC 2011 - 18:13
Valeu Mateus, funcionou mto bem.
#7 by leonardo zanbrão on 28 28UTC Novembro 28UTC 2011 - 10:54
Olá !
Muito jóia seu post, tenho uma dúvida sobre o exemplo03 no seu exemplo ele mostra o nome e pega o código, como faço para pegar outras informações como o telefone e cidade?