Ir para conteúdo

POWERED BY:

Arquivado

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

Gilberto Jr

Pesquisa no banco de dados após pressionar o "TAB"

Por , em ASP Clássico

Recommended Posts

Gilberto Jr    26

Gilberto Jr
Postado

Boa tarde pessoal.

 

Seguinte,

Tenho um formulário, esse formulário tem algumas informações que tem que vir do banco de dados.

 

Exemplo, estou cadastrando uma nota fiscal, dai na parte de incluir o cliente tem um campo input type="text" onde é digitado o código do cliente.

 

Queria que na hora que digitar o código do cliente e pressionar a tecla TAB ir até o banco de dados e pesquisar e se tiver algo trazer e preencher o campo nome, endereço e tal.

 

 

Se tiver como fazer isso irá me adiantar muito no sistema que eu estou desenvolvendo aqui.

 

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

use jquery no evento KeyPress pegando o tab, o key code do tab é 9, exemplo:

 

$("#parentOfTextbox").on('keydown', '#textbox', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    // chame a pesquisa aqui
  } 
});

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

o evento onblur é disparado quando os elementos do formulário perdem o foco. Todas as vezes que o usuário digita alguma coisa em uma caixa de texto e passa para outro campo, ou retira o foco de uma janela, ou qualquer outro elemento de formulário, este evento é chamado. Agora se realmente quiser a tecla <TAB> pressionada melhor o evento KeyPress

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

GUSTAVO, nesse caso eu desejo usar o TAB mesmo pois eu não quero que a função seja executada assim que o campo perder o foco como mencionou o XAN.

 

XAN, no código que você mencionou acima

 

$("#parentOfTextbox").on('keydown', '#textbox', function(e) { var keyCode = e.keyCode || e.which; if (keyCode == 9) { e.preventDefault(); 
// aqui eu digito o meu select?
// chame a pesquisa aqui } });

 

Vamos imagina que o meu formulario tem os seguintes campos

 

<form method="post" action="#">
Código<br />
<input type="text" name="codigo" id="codigo" value="" /><br />
Nome<br />
<input type="text" name="nome" id="nome" value="" />
</form>

 

Assim que o formulário digitar o código do cliente e pressionar TAB para mudar de campo eu quero que o sistema faz a pesquisa no banco de dados e se tiver algo preencher o campo onde vai o nome do cliente.

 

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

dai usa um auto-complete em jquery, dá uma olhada no fórum que postei alguns exemplos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

Beleza, nesse sistema eu já tenho o auto-complete.

 

Eu vou tentar fazer aqui e qualquer duvida eu posto novamente isso o erro.

 

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

tranquilo , mas seria só implementar seu auto-complete

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

Estou postando o código aqui pra tentarem me ajudar.

 

Eu tentei fazer aqui mas não consegui.

 

paginaKeyPress.asp

 

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
dim conn
'Criamos o objeto de conexão
Set conn = Server.CreateObject("ADODB.Connection") 
 
'Abrimos uma conexão com o banco de dados - [IMPORTANTE] altere os dados abaixo com as informações de sua base de dados
conn.Open("DRIVER={MySQL ODBC 5.1 Driver};SERVER=host;PORT=3306;DATABASE=database;USER=user;PASSWORD=pass;OPTION=3;")
'arquivo que checa se existe o login e a senha do usuario que esta tentando logar
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Complete</title>
</head>
 
<body>
<link href="css/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.3.js" language="javascript"></script>
<script src="js/jquery.autocomplete.js" language="javascript"></script>
       
<script type="text/javascript" language="javascript">
$(document).ready(function(){
//Ao digitar executar essa função   
$("#codigo").focus().autocomplete("buscakeypress.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>
<form method="post" action="#">
Código<br />
<input type="text" name="codigo" id="codigo" value="" /><br />
Nome<br />
<input type="text" name="nome" id="nome" value="" />
</form></body>
</html>

 

A pagina do autocomplete

 

buscaKeyPress.asp

 

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
dim conn
'Criamos o objeto de conexão
Set conn = Server.CreateObject("ADODB.Connection") 
 
'Abrimos uma conexão com o banco de dados - [IMPORTANTE] altere os dados abaixo com as informações de sua base de dados
conn.Open("DRIVER={MySQL ODBC 5.1 Driver};SERVER=host;PORT=3306;DATABASE=database;USER=user;PASSWORD=pass;OPTION=3;")
'arquivo que checa se existe o login e a senha do usuario que esta tentando logar
 
' Pega valor
valor = Request.QueryString("valor")
 
' SQL de pesquisa
sql = "SELECT fantasia_apelido FROM tec_clientefornecedor WHERE UPPER(id) like UPPER('%"&valor&"%')"
Set query = conn.execute(sql)
Do While Not query.eof
' Lista o nome
response.write query("fantasia_apelido")&"|"&query("fantasia_apelido")&vbCrLf
query.movenext
Loop
 
Set query = Nothing
Set conn = Nothing
%>

 

Se puderem me ajudar fico grato.

 

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado 
$("#parentOfTextbox").on('keydown', '#textbox', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    // chame o autocomplete aqui   <=====
  } 
});

vc precisa verificar a tecla no caso a key ==9 //TAB

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

Fiz e ficou dessa forma.

 

 

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
dim conn
'Criamos o objeto de conexão
Set conn = Server.CreateObject("ADODB.Connection") 
 
'Abrimos uma conexão com o banco de dados - [IMPORTANTE] altere os dados abaixo com as informações de sua base de dados
conn.Open("DRIVER={MySQL ODBC 5.1 Driver};SERVER=host;PORT=3306;DATABASE=database;USER=user;PASSWORD=123456;OPTION=3;")
'arquivo que checa se existe o login e a senha do usuario que esta tentando logar
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Complete</title>
</head>
 
<body>
<link href="css/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.3.js" language="javascript"></script>
<script src="js/jquery.autocomplete.js" language="javascript"></script>
       
<script type="text/javascript" language="javascript">
$("#nome").on('keydown', '#coddigo', function(e) { 
  var keyCode = e.keyCode || e.which; 
 
  if (keyCode == 9) { 
    e.preventDefault();
 
// inicio autocomplete
$(document).ready(function(){
//Ao digitar executar essa função   
$("#codigo").focus().autocomplete("buscakeypress.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
})
 
})
// fim autocomplete
 
  } 
});
</script>
<form method="post" action="#">
Código<br />
<input type="text" name="codigo" id="codigo" value="" /><br />
Nome<br />
<input type="text" name="nome" id="nome" value="" />
</form></body>
</html>

 

Agora logo após pressionar a tecla TAB ele pesquisa no banco de dados e preenche o campo nome?

<input type="text" name="nome" id="nome" value="" />

 

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

ele esta executando o

autocomplete pegando a página buscakeypress.asp

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

Mas o codigo autocomplete que esta dentro da pagina buscakeypress.asp eu vou ter que colocar dentro do arquivo javascript que executa com pressiona o TAB?

 

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

tem que ser demtro do jquery que dispara o evento da tecla tab, para ele ler o TAB e chamar o autocomplete



Olha este exemplo, neste está sendo usado o OnKeyUp.

 


<body>
<form action="buscacontato.asp" method="post" id="formContato" name="formContato">
    <input type="text" name="nomecontato"  id="nomecontato" size="20" autocomplete="off">
    
    <div id="resultados"></div>
</form>
<script>
if (!!window.attachEvent) {
// IE
    document.getElementById('nomecontato').attachEvent('onkeyup', buscaContato);
}
else {
// firefox/chrome
document.getElementById('nomecontato').addEventListener('keyup', buscaContato, false);
}
</script>

</body>

 

 

Javascript

function carregaObjetoComXML(sXml){
    if (ehIE){
    
        var xmldom = criaXMLDocument();
        xmldom.loadXML(sXml);
    } else {
        var oParser = new DOMParser();
        var xmldom = oParser.parseFromString(sXml,"text/xml");
    }
    return xmldom;
}

// Instancia objeto do tipo XMLHttpRequest
var oXMLhttp = criaXMLHttpRequest();


function buscaContato() {

    var oForm = document.getElementById("formContato");
    var sURL =  oForm.action;
    // Codifica os parâmetros para serem passados ao POST
    var nomecontato = document.getElementById("nomecontato").value;

    if (nomecontato != "") {
    oXMLhttp.open("post", sURL, true);
    oXMLhttp.setRequestHeader("Content-Type",
                              "application/x-www-form-urlencoded");

    oXMLhttp.onreadystatechange = function() {

    if (oXMLhttp.readyState == 4) {
            //Tratar a resposta do servidor
            var arResult = oXMLhttp.responseText.split(",");
            var nomes = arResult[0];
            document.getElementById('resultados').style.display = "block";        }
            document.getElementById("resultados").innerHTML = nomes;
    };
    oXMLhttp.send("nome="+nomecontato);
    }
}

function setaContato(encontrado){
        var cible = document.getElementById('s');
        document.getElementById("nomecontato").value = encontrado;
        document.getElementById('resultados').style.display = "none";
}

 

 

ASP

 

 

 

<%@ LANGUAGE="VBScript" %>

<!--#include file="variaveis.asp"-->


<%
    

nome = request.form("nome")
    
nome = uCase(Replace(nome," ","|"))

set rsprocuracontato = Server.createobject("adodb.recordset")
rsprocuracontato.CursorLocation=3
cmdsql = "SELECT id_contato, nome  "
cmdsql = cmdsql & "from contato "
cmdsql = cmdsql & "where upper(nome) regexp '" & nome & "' "
rsprocuracontato.open cmdsql, "driver=MySQL ODBC 3.51 Driver;DATABASE="& bancodedados&";SERVER=" & ip & ";UID=" & nomebd & ";PASSWORD=" & senhabd & " "

lista = "<ul>"

do while not rsprocuracontato.eof

id = rsprocuracontato("id_contato")

lista = lista + "<li><a onclick='setaContato(this.innerHTML);' href='#' id='s'>" + rsprocuracontato("nome") + "</a></li>"

rsprocuracontato.movenext
loop
rsprocuracontato.close
response.write lista + "</ul>"
%>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

Segue o código com a mudança.

 

Se não evoluiu eu vou desistir rsrs

 

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<%
dim conn
'Criamos o objeto de conexão
Set conn = Server.CreateObject("ADODB.Connection") 
 
'Abrimos uma conexão com o banco de dados - [IMPORTANTE] altere os dados abaixo com as informações de sua base de dados
conn.Open("DRIVER={MySQL ODBC 5.1 Driver};SERVER=host;PORT=3306;DATABASE=database;USER=user;PASSWORD=*******;OPTION=3;")
'arquivo que checa se existe o login e a senha do usuario que esta tentando logar
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Auto Complete</title>
</head>
 
<body>
<link href="css/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.3.js" language="javascript"></script>
<script src="js/jquery.autocomplete.js" language="javascript"></script>
       
<script type="text/javascript" language="javascript">
$("#nome").on('keydown', '#codigo', function(e) { 
  var keyCode = e.keyCode || e.which; 
 
  if (keyCode == 9) { 
    e.preventDefault();
 
<%
 
' Pega valor
valor = Request.QueryString("valor")
 
' SQL de pesquisa
sql = "SELECT fantasia_apelido FROM tec_clientefornecedor WHERE UPPER(id) like UPPER('%"&valor&"%')"
Set query = conn.execute(sql)
Do While Not query.eof
' Lista o nome
response.write query("fantasia_apelido")&"|"&query("fantasia_apelido")&vbCrLf
query.movenext
Loop
 
%>
 
  } 
});
</script>
<form method="post" action="#">
Código<br />
<input type="text" name="codigo" id="codigo" value="" /><br />
Nome<br />
<input type="text" name="nome" id="nome" value="" />
</form></body>
</html>

 

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

testou ele.... na verdade ele não é difícil, mas sim trabalhoso, até deixar o jquery do jeito.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

Vou da um tempo nessa questão.

 

Agora eu estou agarrado em outras coisas aqui, daqui uns dias eu volto a verificar isso.

 

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites

xanburzum    169

xanburzum
Postado

Tranquilo...

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