How to use the Jquery Keyup event to show records within a div coming from a PHP script?

Question

I am working on a project where I would like when I was going to type some value into an input, to be showing the records just below it. Below follows the code structure I have until then:

index.html

<div>
   <label>Pesquisar</label>
   <input type="search" id="pesquisar">            
</div>

//Div que mostra os dados relativos a consulta feita através do script filter.php

<div id="grid"></div>

<script>

$("#pesquisar").keyup(function(){

var pesquisar = $("#pesquisar").val();
       
    $.ajax({

    url:"/filter.php",
    method:"POST",
    data:{pesquisar:pesquisar},
    success:function(data)
    {
    
    $('#grid').html(data);
    
    }
    
   });
  
});
</script>

Below, the php script (filter.php) that queries a call table (products_tbl) in Mysql:

Table products

prodID | nome   | preco
------------------------
001     | sapato  | 20.00
002     | calça   | 25.00
003     | Camisa  | 15.00

filter.php:

<?php

include 'mysqli_connection.php'; // Script para conexão com o banco de dados

$pesquisar = $_POST['pesquisar'];

$stmt = $db -> prepare('SELECT prodID, nome, preco FROM produtos_tbl WHERE nome LIKE '%$pesquisar%'');
    
$stmt -> execute();
$stmt -> store_result(); 
$stmt -> bind_result($prodID, $nome, $preco);

while ($stmt -> fetch()) { 

echo '
    
<div class="card text-center m-1">
      
      <div class="card-body">
        <h5 class="card-title">'.$nome.'</h5>
        <p class="card-text"><h5>R$ '.$preco.'</h5></p>
        <p class="card-text">Produto ID '.$prodID.'</p>
      </div>

</div>
    
    ';
    
}


?>

Based on the php script above, when I try to type something within the input located on the index.html page, the following error occurs:

Warning: A non-numeric value encountered in filter.php on line 26

------------

Fatal error: Uncaught DivisionByZeroError: Modulo by zero in /filter.php:26 Stack trace: #0 {main} thrown in /filter.php on line 26

What could be and how can I improve my code above so that I return the values correctly within the div?

Answer 1

You have concatenation problem. Change the script

$stmt = $db -> prepare('SELECT prodID, nome, preco FROM produtos_tbl WHERE nome LIKE '%$pesquisar%'');

for

$stmt = $db -> prepare('SELECT prodID, nome, preco FROM produtos_tbl WHERE nome LIKE "%'.$pesquisar.'%"');