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.
Mateus Gamba 
#1 by Paulo on 29 de Abril de 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 de Abril de 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 de Julho de 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 de Julho de 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 de Agosto de 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 de Setembro de 2011 - 18:13
Valeu Mateus, funcionou mto bem.
#7 by leonardo zanbrão on 28 de Novembro de 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?
#8 by cygnustksmarcos on 2 de Março de 2012 - 21:55
olá muito legal seu post, porém tenho uma dúvida e queria saber se pode me ajudar, tenho duas informações para ser recuperada (nome e link), após a pesquisa no campo text onde chamo o autocomplete ao após selecionar um nome preciso que exiba a opção em uma div com o seu determinado link.
Será que alguém já fez isso, criei uma array de objetos onde guardo o value e o label , deu quase certo, na pesquisa ele pesquisa pelo label e se clicar ele abre o link, porém se pesquisar e navegar no resultado com a seta está sendo exibido no campo text o link e não o nome.
Você sabe como posso fazer essa função no autocomplete
#9 by Norberto Miranda on 11 de Março de 2012 - 19:04
Muito bom. Funciona perfeitamente. Estou trabalhando no exemplo 2 para exibir imagens antes dos textos mas quando se clica na imagem e não no texto fica selecionado no campo de texto o link da imagem.
#10 by ricardo on 30 de Maio de 2012 - 15:49
Caro
Existe alguma função que ao clicar com o cursor do mouse ele já start o envio do formulário??
Já tentei de varias formas mais não foi
Abs
#11 by Regis Veiga on 25 de Junho de 2012 - 21:05
Muito bom, Matheus. Estava pesquisando sobre como fazer isso e seus exemplos me ajudaram muito. Parabéns!
Abraços.
#12 by Regis Veiga on 25 de Junho de 2012 - 21:28
Gostaria apenas de fazer uma pergunta: como eu faço que para quando eu carregue a página, o foco não vá diretamente para o campo de busca?
#13 by Ricardo on 1 de Agosto de 2012 - 18:10
Muito bom o seu exemplo; no exemplo 3 quando tenho um campo para busca na tabela x e logo abaixo tenho uma busca para a tabela y, utilizando o mesmo metodo de busca (autocomplete), se eu entro no form passando como parametro os dois campo, ele apaga o primeiro e completa o segundo… como eu posso resolver esse problema?
Tabela 1: <input name="nome" id="nome" value="”size=”100″ type=”text” autocomplete=”off”>
Tabela 2: <input name="nome" id="nome" value="” size=”100″ type=”text” autocomplete=”off”>
Há, se a consulta tiver dois inputs se eu dou um click no segundo input ele apaga o primeiro!
Nome:
Tipo:
Obrigado!
#14 by Márcio on 18 de Dezembro de 2012 - 14:39
Ótimo, agora preciso adaptar para quando achar o registro, abrir uma div flutuante com mais informações.
Abraço!!
#15 by Ricardo on 18 de Dezembro de 2012 - 14:49
Vc é o cara!!!
#16 by Pedro Aglailton on 21 de Fevereiro de 2013 - 16:20
Amigo qual possibilidade do exemplo 03 trazer 3 valores como identidade
#17 by mateusgamba on 21 de Fevereiro de 2013 - 16:35
teria como explicar melhor? o mais simple, seria concatenar e depois no javascript fazer um split
#18 by Ricardo Palhares on 21 de Fevereiro de 2013 - 16:37
Mateus, tudo bem? parabens pelos os seus exemplos! Obrigado!
#19 by Pedro Aglailton on 22 de Fevereiro de 2013 - 01:04
Mateus Assim vc colocou no exemplo 03 dois campos “nome” e “Codigo” para serem preenchidos automaticamente , fiz os teste aqui conseguir resgatar, so que estou com dificuldade em colocar um 3 campo vindo do Banco de dados como o da identidade, “nome” “codigo” e “identidade” entendeu. poderia me dizer como colocar no javascript ou teria q mudar a Consulta do Banco de dados. agradeço.. mas ta de parabens voce pelo codigo ,
#20 by Ricardo on 15 de Dezembro de 2013 - 18:38
Existe a possibilidade de a pesquisa retornar na listagem uma imagem para cada nome encontrado? Exemplo: Imagem e na frente o nome do produto.
#21 by mateusgamba on 15 de Dezembro de 2013 - 19:57
Já fiz isso utilizando select2 (http://ivaynberg.github.io/select2/)
#22 by Ricardo on 18 de Dezembro de 2013 - 15:57
Poderia dizer como ? Para todos nós.
#23 by Ricardo on 19 de Dezembro de 2013 - 08:20
excelente site!!! valeu pela dica!!!
#24 by danielle on 23 de Abril de 2014 - 10:56
mateus muito bom seu post, me ajudou muito.
Estou usando o exemplo 3 em varias partes do meu formulário, mais encontrei um probleminha.
Quando a descrição do nome é grande no banco ele não consegue listar.
você teria alguma solução?
#25 by rafael on 30 de Julho de 2014 - 12:15
Boa tarde, a postagem é execelente queria sua ajuda.
Uso asp+ access, sei que esta ultrapassado principalmente o banco mas como poderia aplicar seus metodos no asp+access?
#26 by DAVID on 1 de Novembro de 2014 - 13:19
Pq o meu nao da certo!”?
#27 by Rafael on 10 de Julho de 2016 - 11:00
Ótimo POST! Pena que o asp foi descontinuado.