Ajax live search is not working after searching one value

Question

my page requires refreshing the page after every search. please any help. I am bignner for Ajax and here is my index page code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){

    $("#live_search").keyup(function(){
      var input = $(this).val();
      //alert(input);

      if(input != ""){
        $.ajax({

          url:"livesearch.php",
          method:"POST",
          data:{input:input},

          success:function(data){
           $("#searchresult").html(data);
          }
        });
      }else{
        $("#searchresult").css("display", "none"); 
      }
    });
  });
    
</script>

and here is my php code

<?php

include('our/db_connect.php');

if(isset($_POST['input'])){

$input = $_POST['input'];
$query = "SELECT * FROM parcels WHERE reference_number LIKE '{$input}'";
$result = mysqli_query($conn, $query);

if(mysqli_num_rows($result) > 0){?>

        <table class="table table-bordered table-striped mt-4">
            <thead>
                <tr>
                    <th>tracking num</th>
                    <th>sender contact</th>
                    <th>status</th>
                    <th>From</th>
                    <th>To</th>
                </tr>
            </thead>
            <tbody>
                <?php
                while($row = mysqli_fetch_assoc($result)){
                    $ref = $row['reference_number'];
                    $sender = $row['sender_name'];
                    $from = $row['from_branch_id'];
                    $to = $row['to_branch_id'];

                    ?>
                    <tr>
                        <td><?php echo $ref;?></td>
                        <td><?php echo $sender;?></td>
                        <td><?php echo $from;?></td>
                        <td><?php echo $to;?></td>
                    </tr>

                    <?php
                }

?>

            </tbody>
        </table>
    <?php 
    
}else{
    echo "No Parcel Found";
}

} ?>

So, what happens exactly? And what is supposed to happen? I'm not sure what I'm looking for. — Stevish, Sep 09 '22 at 20:23
Also, watch out for MYSQL injection! This code will let any site visitor do anything they want to your database! See https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php/60496#60496 for the best way to avoid injection (using prepared statements). — Stevish, Sep 09 '22 at 20:27
**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/32391315) — Dharman, Sep 10 '22 at 09:35

score 1 · Accepted Answer · answered Sep 09 '22 at 20:27

You're hiding the div but not showing it again when you have ajax result.

Write the ajax code like:

if (input != '') {
    $.ajax({
        url: 'livesearch.php',
        method: 'POST',
        data: { input: input },
        success: function (data) {
            $('#searchresult').html(data);
            $('#searchresult').show();
        },
    });
} else {
    $('#searchresult').hide();
}

Here I am showing the $('#searchresult') again after your have response and you replaced the HTML in $('#searchresult')

This answer should also include the bigger issue of the mysql injection vulnerability. See https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php/60496#60496 — Stevish, Sep 09 '22 at 20:30

Ajax live search is not working after searching one value

1 Answers1