Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Javascript WD-47- Campo busca + PHP

Bom dia, tenho o seguinte problema, no curso WD-47 na pagina 74 da apostila, temos um evento de busca como abaixo, mas, eu preciso fazer uma busca no BD e retornar com o resultado dentro de uma lista Php. Meu problema é como misturar o resultado do JQuery com os campos do PHP exibindo apenas os resultados encontrados, como posso solucionar isso?

Esta é a parte da busca em JQuery que está na apostila:

$("#busca").on("input", function(){
//guarda o valor digitado, removendo espaços extras.
var busca = $(this).val().trim();
if(busca.length){
$(".cartao").hide().filter(function(){
return $(this).find(".cartao-conteudo")
.text()
.match(new RegExp(busca, "i"));
}).show();
}else{
$(".cartao").show();
}
});

Este é o codigo onde quero inserir o resultado da Busca no Banco de Dados

<?php
$produtos = listaProdutos($conexao);
foreach ($produtos as $produto) :
?>
<tr>
    <td><?=$produto->getNome() ?></td>
    <td><?=$produto->getPreco() ?></td>
    <td><?=$produto->getCodigo() ?></td>
    <td><?=$produto->getReferencia() ?></td>    
    <td><?=$produto->getPeso() ?></td>
    <td><?=$produto->getMedida() ?></td>
    <td><?=$produto->getNcm()?></td>
    <td><?= substr($produto->getDescricao(), 0, 40) ?></td>
    <td><?=$produto->getMarca()->getNome() ?></td>
    <td><?=$produto->getCategoria()->getNome() ?></td>
    <td><?=$produto->getDestaque() ?></td>
    <td>insira seu código aqui
2 respostas

Buenas Amigo, eu conheço duas formas de fazer isto.

A primeira é você usar o Jquery Ajax. Com o Ajax, ao digitar no campo input você pode mandar o valor para um PHP e retornar o resultado filtrando. Segue um exemplo:

$("#busca").on("keypress", function(){ var busca = $(this).val().trim();

$.ajax({ method: "POST", url: "busca.php", data: { buscar: busca } }) .done(function( msg ) { alert( "Data Saved: " + msg ); }); });

Uma segunda alternativa é você imprimir a tabela e depois usar o Filter para ocultar os resultados, porém se você usar paginação ou resultados com muitos registros esta função fica inviável, pois a consulta irá demorar muito tempo, por isto aconselho estudar mais sobre o Ajax pois ele ajuda muito.

Espero ter ajudado.

solução!

Boa noite a todos segue solução compartilhada pelo André Chaves.

André Chaves (426.2k xp, 718 posts) Moderador 3 semanas atrás Oi Sergio, tudo bom?

Nesse caso, precisariamos buscar no banco os poximos dados, fazer uma nova requisição e trazer uma nova pagina para o usuario com os proximos dados. Esse tipo de paginação costuma ser meio pesada pro seu servidor, que vai receber muitas requisições.

Existem algumas alternativas, como, por exemplo, o datatables do bootstrap que pega todos os seus dados e gera uma lista com paginação =)

https://datatables.net/examples/styling/bootstrap.html

A gente só precisa configurar o script ;)

No link acima você encontra alguns exemplos. aqui você encontra mais um, passo-a-passo.

http://www.codingcage.com/2015/10/how-to-use-jquery-bootstrap-datatables.html

Qualquer problema, compartilha com a gente!

Abraço e bons estudos

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software