Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Sistema de Busca PHP + MYSQL

Pessoal tenho uma página, e preciso quando em criar no botão pesquisar seja feita a busca e mostrado o resultado... segue código...

<?php require_once 'cabecalho.php' ?>
<?php require_once 'classes/conexao2.php' ?>

<!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/> 
<script type="text/javascript" src="DataTables/datatables.min.js"></script>
<script type="text/javascript" src="DataTables/DataTables-1.10.20/js/dataTables.jqueryui.min"></script>
<script type="text/javascript" language="javascript">    

$(document).ready(function () {
    $('#listar_dados').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "proc_pesq_user.php"
            "type": "POST"
        }

    });
} );

</script>



<div class="row">
    <div class="col-md-12">
        <h2>Sistema de Consulta</h2>
        <p>Selecione uma das opções Abaixo</p>
    </div>
</div>




 <!-- <form class="form-signin">  -->
     <form class="form-signin" action="listar_dados.php" method="submit" class="pesquisar">
      <!-- <div class="text-center mb-4">
        <img class="mb-4" src="../../assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
        <h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
        <p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
      </div> -->

     <!--  <div class="form-label-group">
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputEmail">Email address</label>
      </div> -->


             <input type="search" id="inputsearch" class="form-control" placeholder="pesquisar" required autofocus>




            </br>
            </br>
                <button class="btn btn-lg btn-primary btn-block" type="submit">Pesquisar</button>


      </form>

<!-- <table id="listar_dados" class="display"> -->





<?php require_once 'rodape.php' ?>

Conexão Banco

<?php
// definições de host, database, usuário e senha
$host = "localhost";
$db   = "mega_online_987";
$user = "root";
$pass = "usbw";
// conecta ao banco de dados
$con = mysql_connect($host, $user, $pass) or trigger_error(mysql_error(),E_USER_ERROR); 
// seleciona a base de dados em que vamos trabalhar
mysql_select_db($db, $con);
// cria a instrução SQL que vai selecionar os dados
$query = sprintf("SELECT * FROM meg12_xoptions");
// executa a query
$dados = mysql_query($query, $con) or die(mysql_error());
// transforma os dados em um array
$linha = mysql_fetch_assoc($dados);
// calcula quantos dados retornaram
$total = mysql_num_rows($dados);
?>

Como colocar uma ação no search?

Valeu galera....

1 resposta

Ricardo, boa tarde!

Uma sugestão é pegar o valor do campo via JQuery

const valorProcurado = $('.inputDeBusca').val()

Depois você pode fazer uma request pro seu backend passando como query params o seu valorProcurado

let resultados;
fetch('suaUrlDeBusca.com?search='+valorProcurado)
    .then(response => response.json())
    .then(json => resultados = json)
    .catch(error => console.log(error));

Eu espero ter ajudado e bons estudos!