Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mateushim

Auto complete + JQuery + ASP

Por , em ASP Clássico

Recommended Posts

mateushim    0

mateushim
Postado

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

 

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,  
)  
go

 

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:

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

mateushim    0

mateushim
Postado

É verdade desisto

 

para tratar isso tem mudar essa linha

 

valor = Request.QueryString("valor")

para

 

valor = Replace(Request.QueryString("valor"),"'","")

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mário Monteiro    179

Mário Monteiro
Postado

sua string não poderá ter aspas simples?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos ASP Clássico
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito