(Resolvido) Busca Dinâmica Com Ajax(by Tenko)

Outubro 25, 2007

Bom dia!

Estou usando o sistema de busca dinâmica do Tenko, aqui , que funciona perfeitamente.

Agora quero colocar link nos resultados da busca no bd, assim ao clicar no resultado já preenche o campo.

Segue os códigos:

Salve esta 1º página como index.php

<html>
<head>
<title>BUSCA DINÂMICA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
&lt;script src="script.js"></script>
&lt;script>
function pesquisa(valor)
{
//FUNÇÃO QUE MONTA A URL E CHAMA A FUNÇÃO AJAX
url="busca_nome.php?valor="+valor;
ajax(url);
}
</script>
</head>

<body>
<table width="657" border="1" cellpadding="2" cellspacing="0" bgcolor="#f7f7f7">
<tr>
<td align="center" bgcolor="#CCCCCC">
<strong><-
BUSCA DINÂMICA ->
</strong>
</td>
</tr>
<tr>
<td>
<strong>
DIGITE AQUI O NOME DA PESSOA
</strong>:
<input type="text" name="nome" onKeyPress="pesquisa(this.value)">
</td>
</tr>
<tr>
<td>
<div id="pagina">
</div>
</td>
</tr>
</table>

</body>
</html>

Agora salve esta como script.js

function ajax( url )
{

    //alert( url );
    //alert(nick);
    //alert(dest);
    //alert(msg);

    req = null;
    // Procura por um objeto nativo (Mozilla/Safari)
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET",url,true);
        req.send(null);
        // Procura por uma versão ActiveX (IE)
    }else if (window.ActiveXObject){
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req){
            req.onreadystatechange = processReqChange;
            req.open("GET",url,true);
            req.send();
        }
    }
}

function processReqChange()
{

    // apenas quando o estado for "completado"
    if (req.readyState == 4) {

        // apenas se o servidor retornar "OK"
        if (req.status ==200) {

        // procura pela div id="pagina" e insere o conteudo
        // retornado nela, como texto HTML

            document.getElementById('pagina').innerHTML = req.responseText;
        }else{
            alert("Houve um problema ao obter os dados:n" + req.statusText);
        }
    }
}

Enfim, salve este como busca_nome.php

<?php

    require_once "lib/intranet.php"; // Minhas libs
    require_once "lib/start.php";
    
    $sNome = $_GET["valor"];
    $sNome = trim( $sNome );

    if( empty( $sNome )){

        echo "Digite algo";

    }else{
        $sSql    = " select * from tbl_usuario where nome like '" .$_GET[valor]. "%' ";
        $sResult = db_query( $sSql );
        $iLinhas = db_rows( $sResult );

        if( $iLinhas > 0){
            while( $sLinha = db_fetch_array( $sResult )){
                echo $sLinha['nome']."<br>";
            }
        }
    }
?>

Obrigado.

Tenko · Outubro 25, 2007

Boa tarde, beleza?

Então, o que você esta pedindo pode ser feito da seguinte maneira :

1 - Onde você lista os resultados do PHP : echo $sLinha['nome']."<br>";

Você muda para isso :

while( $sLinha = db_fetch_array( $sResult )){
     ?>
          <a href="#" onclick="java script:setaCamposForm('<?=$sLinha['id']?>|$sLinha['nome']')"><?=$sLinha['nome']?></a>
     <?           
    }

Depois você acrescenta essas funções Javascript no seu código

/**
 * @author Tenko
 */

 var d = document;

 function $( bloco ) {     
    return d.getElementById( bloco );
 }

 function setaCamposForm( lista ){
     
    var dados = lista.split("|");
    var cod   = dados[0];
    var nome  = dados[1];
    
        // Onde esta frmCodigo e frmNome você muda para o nome do campo onde você quer que ele jogue os resultados
    $('frmCodigo').value = cod;
    $('frmNome').value = cod;
 }

Outubro 25, 2007

Boa tarde Tenko!

Na paz!

Desde já agradeço a atenção.

Fiz as modificações, mas ainda não preenche o campo do input.

Obrigado.

Tenko · Outubro 25, 2007

Teste esse modelo que você vai entender como funciona

<html>

    <head>
    
        <title></title>
    
        <script>

        /**
        * @author Tenko
        */

        var d = document;

        function $( bloco ) {
            return d.getElementById( bloco );
        }

        function setaCamposForm( lista ){

            var dados = lista.split("|");
            var cod   = dados[0];
            var nome  = dados[1];

            // Onde esta frmCodigo e frmNome você muda para o nome do campo onde você quer que ele jogue os resultados
            $('frmCodigo').value = cod;
            $('frmNome').value = nome;
        }

    </script>
        
    </head>
    
    <body>
    
        Codigo <input type="text" name="frmCodigo" id="frmCodigo"><br/>
        Nome   <input type="text" name="frmNome" id="frmNome">
        
        <br/>
        <br/>
        <br/>
        
        <table border="1" width="50%">
            <tr>
                <th>Codigo</th>
                <th>Nome</th>
            </tr>
            
            <tr onclick="java script:setaCamposForm('1|Tenko');">
                <td>1</td>
                <td>Tenko</td>
            </tr>
            
            <tr onclick="java script:setaCamposForm('2|Kellen');">
                <td>2</td>
                <td>Kellen</td>
            </tr>
            
        </table>
        
    </body>    
    
</html>

Outubro 29, 2007

Boa tarde Tenko!

Cara obrigado pela dica. Funfou legal.

Abraço.

Entrar

(Resolvido) Busca Dinâmica Com Ajax(by Tenko)

Pergunta

Guest MANOEL MESSIAS

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

Tenko

Link para o comentário

Compartilhar em outros sites

Guest Manoel Messias

Link para o comentário

Compartilhar em outros sites

Tenko

Link para o comentário

Compartilhar em outros sites

Guest Visitante

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades