Fazer pesquisa sem carregar a pagina

[cissah 0]

Oi gente, preciso muito da ajuda de vocês!

 

Tenho um input que TEM QUE FAZER uma pesquisa no banco de dados SEM CARREGAR A PAGINA, mas a pesquisa não é feita porque não tem o $_GET passado pela url.

 

Então, como posso fazer para pesquisar no banco de dados sem utilizar $_GET ou $_POST? Tentei com session mas não funcionou!

 

 

Campo pesquisa:

<form name="form_pesquisa" action="#page6" id="form_pesquisa" method="GET">
<img id="seta_pesq" src="images/seta_pesq.png" />
    <input id="pesq" type="text" name="pesq" onclick="if(this.value=='Pesquisar no site')this.value='';" onblur="if(this.value=='') this.value = 'Pesquisar no site';" onkeypress="pesquisar();" value="Pesquisar no site" />
    <a href="#page6" class="scroll"><input type="submit" name="pesquisa" id="pesquisa" value="OK"></a>         
</form>

 

Resultado da pesquisa:

 

if (isset($_GET['pesq'])){
     $pesquisa = $_GET['pesq'];
 

    $sql = ('SELECT * FROM servicos WHERE descricao_serv LIKE "%'.$pesquisa.'%"');
    $query = mysql_query($sql);
    while ($row = mysql_fetch_array($query)) { 
.....
    }

}

 

Por favor, me ajudem, não tenho ideia de como fazer isso funcionar!!

 

[Osmar L Lima 51]

Talvez isto te ajude:

 

http://imasters.com.br/artigo/11269/php/autocomplete-com-php--jquery/

 

Sei que não é bem autocomplete que você procura, mas o princípio é o mesmo.

[cissah 0]

Obrigada Osmar, mas ainda não funcionou, mas já me deu uma ideia de como fazer.

 

Só preciso pegar o valor do método do post pelo javascript e verificar na pagina que retorna a pesquisa!

Alguém sabe como passo fazer isso no js? Pegar o valor do post?

Sou bem leiga e não conheço muito!

[masi 22]

Nesse caso o que você vai usar é o javascript/AJAX. Se vc quer algo simples, basta aprender a colocar o resultado em um elemento na mesma pagina com AJAX. Já se você pretende algo bem elaborado, talvez isso aqui te ajude. Mete a cara agora, boa sorte.

[cissah 0]

Pois é, preciso de algo bem simples e prático!

 

Não sei como passar o valor do post por JS, para depois ser usado na pesquisa!

Se alguém tiver um exemplo pra me mostrar, agradeço!!

[Cesar Augusto Graeff 53]

Esta vídeo aula irá mostrar com usar o ajax:

 

[cissah 0]

Olá,

 

Consegui fazer o ajax, mas o post na pagina de pesquisa não funciona, alguém sabe onde está o erro?

 

<script type='text/javascript'>

$(function(){
    $('input[pesquisa]').click(function(){
 
    $.ajax({
            type      : 'post',
 
            url       : 'pesquisa.php',
 
            data      : $('#pesq').val(),
 
            dataType  : 'html'
 
        });
 
        });
    });


</script>



 <div id="box_pesquisar">
    <form name="form_pesquisa" action="#page6" id="form_pesquisa" method="GET">
    <img id="seta_pesq" src="images/seta_pesq.png" />
        <input id="pesq" type="text" name="pesq" onclick="if(this.value=='Pesquisar no site')this.value='';" onblur="if(this.value=='') this.value = 'Pesquisar no site';" onkeypress="pesquisar();" value="Pesquisar no site" />
        <a href="#page6" class="scroll"><input type="submit" name="pesquisa" id="pesquisa" value="OK"></a>         
    </form>

 

Página pesquisa.php

 

<ul id="pesquisar">
   
<?php 

    $pesquisa = $_POST['pesq'];
    
    $sql = ('SELECT * FROM servicos WHERE descricao_serv LIKE "%'.$pesquisa.'%"');
    $query = mysql_query($sql);
   
    while ($row = mysql_fetch_array($query)) { 
?>    
    
    <li><?php echo ucfirst(strtolower($row['descricao_serv'])); ?></li>
        
        
    <?php } 
    ?>
 </ul>

[Filipe_Moraes 15]

Tenho aqui um exemplo simples que faz o seguinte: tenho um campo código do cliente, ao clicar em pesquisar o sistema utiliza ajax para fazer uma procura na base de dados e retorna uma resposta, veja:

 

Na sua página html, inserir um input com o id=codigo e uma div que será utilizada como botão, com o id=pesquisar

Ao clicar na div, o ajax será executado.

...
<input type="text" name="codigo" id="codigo" />
<div class="button" id="pesquisar">Pesquisar</div>
...

Na mesma página, inserir o javascript:

<script type="text/javascript">
		$(document).ready(function(){
			$("#pesquisar").click(function(){

				s_Codigo = $("#codigo").val();

				$.post( "pesquisar.php?codigo="+s_Codigo, function( a_Data ) {
					alert(a_Data["msg"]);
				});
			});
		});
</script>

Repare que no código acima estamos a fazer um post para a página "pesquisar.php", esse arquivo tem que existir na mesma pasta onde esta o seu html (para este exemplo).

 

Na mesma página faça o include do jquery no head para que o código acima funcione:

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Agora o arquivo "pesquisar.php":

<?php
//Tipo de retorno, nesse exemplo será em json.
header('Cache-Control: no-cache, must-revalidate');	
header('Content-Type: application/json; charset=utf-8'); 

//Captura o codigo enviado
$s_Codigo = $_REQUEST["codigo"];

//Faz o restante de acordo com a sua necessidade
//Procura o cliente pelo codigo enviado
...
...
...

//Retorna uma resposta em json
echo json_encode(array('msg' => 'Aqui diz se encontrou o cliente ou não'));
?>

Repare que o ficheiro retorna uma resposta em json que será usada no javascript que acabamos de ver ( código completo foi postado mais acima ):

...
alert(a_Data["msg"]);
...

Repare que no final do ficheiro php criamos um array e dentro desse array existe a referência "msg" que foi utilizada no javascript.

 

Tens ai um exemplo completo!

[Cesar Augusto Graeff 53]

 Tem que colocar colchetes no campo data:

 

data : {$('#pesq').val()},

[cissah 0]

Não funcionou, tentei como vcs falaram, mas a pesquisa não chega a ser realizada;

Deixei como estava antes, só colocando o [ ] no data:

 

<script type='text/javascript'>

$(function(){
    
        $('#pesquisa').click(function(){
 
        $.ajax({
            type      : 'post',
 
            data      : [$('#pesq').val()],

            url       : 'pesquisa.php',
 
            dataType  : 'html',
 
            success : function(txt){
                    $('').html(txt);
                }
 
        });alert($('#pesq').val());
    });
});

</script>

e na pesquisa.php está:

 

 $pesquisa = $_POST['pesq'];
    $sql = ('SELECT * FROM servicos WHERE descricao_serv LIKE "%'.$pesquisa.'%"');
    $query = mysql_query($sql);
   
    while ($row = mysql_fetch_array($query)) { ...}

 

 

Acontece que quando dou um alert(), ele passa o valor pesquisado, mas na pagina de pesquisa, ele vem vazio!!!

Então dei um alert na pagina de pesquisa quando abrir, mas ele nao faz este alert(); ou seja, nao carrega a pagina de pesquisa!!!

 

 

Onde estou errando???

[CrazyLOL 2]

Vc está passando o resultado do Jquery para qual elemento html?

 

No caso você está mandando o resultado pra lugar nenhum conforme essa linha:

$('').html(txt);

 

Cria um elemento no html por exemplo:

<span id="resultado"></span>

E adicione assim o retorno do jquery:

$('#resultado').html(txt);

[cissah 0]

eu quero mandar o resultado para uma outra pagina, chamada pesquisa.php!

[Filipe_Moraes 15]

eu quero mandar o resultado para uma outra pagina, chamada pesquisa.php!

 

O parâmetro "data" está errado, fica da seguinte maneira:

data: {
 pesq : $('#pesq').val()
},

Isso porque no seu php está fazendo referência ao "pesq" através do POST:

$_POST['pesq'];