Busca no MySql sem refresh da página

Vamos aprender hoje como realizar uma busca no banco de dados MySql sem necessidade de atualização da página. Vamos utilizar HTML5, JQuery e PHP.

A disposição dos arquivos segue abaixo:

Tabela para busca sem refresh

O código para criarmos a nossa tabela sql segue abaixo.

CREATE TABLE PRODUTOS (
	id INT NOT NULL AUTO_INCREMENT,
    PRIMARY KEY(id),
    produto VARCHAR (90),
    valor VARCHAR (30)
)

Insira alguns dados de exemplo na tabela acima para testarmos a busca posteriormente.

Arquivo HTML5 para busca sem atualização da página (index.php)

Começamos linkando nossos arquivos externos entre as tags head.

<link rel="stylesheet" href="stylesheet.css">
<script src="jquery-2.1.4.min.js"></script>
<script src="javascript.js"></script>

Vamos criar um título e um formulário para busca, bem como a tabela que irá mostrar os dados. A div id resultado será aquela que receberá os dados vindos da pesquisa.

<h1>Busca sem refresh</h1>

<form action="processa.php">
    Buscar por: <input type="text" name="campo" id="campo">
</form>

<div id="resultado">
    include('conecta.php');

    $sql=$mysqli->prepare('select * from produtos');
    $sql->execute();
    $sql->bind_result($id,$produto,$valor);

    echo "
        <table>
            <thead>
                <tr>
                    <td>Id</td>
                    <td>Produtos</td>
                    <td>Valor</td>
                </tr>
            </thead>

            <tbody>
    ";

    while($sql->fetch()){

    echo "
        <tr>
            <td>$id</td>
            <td>$produto</td>
            <td>$valor</td>
        </tr>
    ";
    }

    echo "
        </tbody>
    </table>
    ";
</div>

Arquivo CSS para estilizar a busca (stylesheet.css)

Nosso arquivo de folha de estilo em cascata será responsável por estilizar nossa tabela.

table thead td{
    width: 100%;
    background: #333;
    color:#FFF;
    height: 40px;
    text-align:center;
}

table tbody td{
    width: 100%;
    height: 40px;
    text-align:center;
}

Arquivo para conexão ao banco de dados (conecta.php)

$servidor="localhost";
$usuario="root";
$senha="";
$bancodedados="db_mysqli";

$mysqli=new mysqli($servidor,$usuario,$senha,$bancodedados);

Arquivo para busca dinâmica em PHP (processa.php)

Este será o arquivo responsável por realizar a busca no banco de dados. A variável campo vai receber os dados digitados pelo usuário e através do JQuery realizará a busca pelo termo desejado.

include('conecta.php');

$campo="%".$_POST['campo']."%";

$sql=$mysqli->prepare("select * from produtos where produto like ?");
$sql->bind_param("s",$campo);
$sql->execute();
$sql->bind_result($id,$produto,$valor);

echo "
    <table>
        <thead>
        <tr>
            <td>Id</td>
            <td>Produtos</td>
            <td>Valor</td>
        </tr>
        </thead>

        <tbody>
        ";

        while($sql->fetch()){

        echo "
        <tr>
            <td>$id</td>
            <td>$produto</td>
            <td>$valor</td>
        </tr>
        ";
        }

        echo "
        </tbody>
    </table>
";

Arquivo JQuery para realizar a busca sem refresh do navegador (javascript.js)

O JQuery realizará a integração entre o PHP e o banco de dados sem atualizar o navegador.

$(document).ready(function(){

    $('#campo').keyup(function(){

        $('form').submit(function(){
            var dados = $(this).serialize();

            $.ajax({
                url: 'processa.php',
                method: 'post',
                dataType: 'html',
                data: dados,
                success: function(data){
                    $('#resultado').empty().html(data);
                }
            });

            return false;
        });

        $('form').trigger('submit');

    });
});

Sucesso nos códigos e na vida!