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

Asked

Viewed 34 times

0

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?

  • There doesn’t seem to be anything wrong on line 26, but I noticed that there is an extra quote at the end of the query: '%$search%' '. You should escape it, like this: ... WHERE name LIKE '%$search%';

  • 1

    One more thing. The query is using simple quotes. In this case PHP will simply ignore its variables and use them as if they were strings. Also, the bind is wrong. You are not setting the locations for the Binds. https://www.w3schools.com/php/php_mysql_prepared_statements.asp

  • 1

    jquery autocomplete would not solve this? https://answall.com/questions/428997/php-jquery-autocomplete-din%C3%a2mico

  • I will try to adapt Jquery Autocomplete to another search page. I also found Bootstrap 3 - Typeahead, but it seems to be discontinued for new bootstrap versions.

  • Thanks for the personal feedback. The problem was in the concatenation of the variable within the query as mentioned by Franklin Barreto. The correct is: "%'. $search.'%".

1 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.'%"');
  • Thanks Franklin. The problem was right. Thanks!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.