live search in html table

Question

I want to search by product name then get productdetailsid from db then compare it with each row in this table if it exists , set bachground-color for row!

<div class="input-group m-b"><span class="input-group-btn">
   <button type="button" class="btn btn-primary">Go!</button> </span> <input type="text" class="form-control"id="autocomplete">
    </div>

            <div class="table-responsive">

             <table class="table table-striped table-bordered table-hover">

                    <thead>
                    <tr>
                        <th style="text-align: center">#</th>
                        <th style="text-align: center">Product Name</th>
                        <th style="text-align: center">Quantity</th>
                        <th style="text-align: center">Product Price</th>
                        <th style="text-align: center">Whole Price</th>
                        <th style="text-align: center">Supplier Name</th>
                        <th style="text-align: center"></th>

                    </tr>
                    </thead>
                    <tbody>
                        <?php
                        $per_page=5;
                        if (isset($_GET["page"])) {
                            $page = $_GET["page"];
                        }
                        else {
                            $page=1;
                        }
                        $start_from = ($page-1) * $per_page;
                        $sql = "select p.productname,p.quantity,p.onesale,p.wholesale,p.productdetailsid,s.fullname from productdetails p , supplier s where s.supplierid = p.supplierID LIMIT $start_from,$per_page";
                        $count = ($page*5)-4;

                        $result = $conn->query($sql);
                        if ($result->num_rows > 0) {
                            while($row = $result->fetch_assoc()) {
                            echo "<form method=\"post\" action=\"\">";
                            echo "<tr>";
                            echo "<td>" . $count++ . "</td>";
                            echo "<td>" . $row["productname"] . "</td>
                            <td>" . $row["quantity"] . "</td>
                            <td>" . $row["onesale"] . "</td>
                            <td>" . $row["wholesale"] . "</td>
                            <td>" . $row["fullname"] . "</td>
                            <td><button type=\"submit\" class=\"btn btn-xs btn-danger\" name=\"removeBtn\"><i class=\"fa fa-times\"></i> </button></td>
                            <td style=\"display:none;\"><input type=\"hidden\" name=\"id\" value='".$row["productdetailsid"]."'>
                            </td>"
                            ;
                            echo "</tr>";
                            echo "</form>";
                        }

                        }
                        $conn->close();
                        ?>
                    </tbody>
                </table>
            </div>

Answer 1

For Live search in the table you need to use AJAX for getting the result, then using that result you can use Javascript loop to find which rows are found and change the color. I would prefer JSON output (JSON array output) from the PHP script, I can use that in Javascript Loop...

in PHP

You need to make a seperate PHP file for getting ajax output...say ajax.php

<?php
//Assuming that 'q' is the POST variable for finding the query
if(!empty($_POST['q']))
{
    //Put your database query execution code here with using q as search query
    //Set header to JSON
    header('Content-Type:application/json');
    //assuming that $result is associative array of your SQL query output 
    which contains array of the rows to be hightlighted
    echo json_encode($result);
}

This will give a JSON array output which can be easily read by AJAX or $.post functions...

in Javascript

here's the tricky part. you need to make an ajax call and then use that data to highlight the rows....but first need to give an ID to the table body...

...<tbody id="table1">....</tbody></table>

Then you need to use ajax or $.post function to make the call, I have used $.post as it's simple

/**** Cosidering "input1" is a input element for getting query to be searched with id = input1 ****/
var q_data = $("#input1").val();
$.post(ajax.php,
{
    q: q_data
},
function(data,status)
{
   $.each($("#table1").find("<tr>"),function(i,value)
   {
       var element = $(this);
       $.each(data,function(i,val2){
          if(val2 == $(element).find("<td>").text())
            {
              $(element).css('background','lgihtyellow');
            }
       });
   });
}
);

The code may not work before suitable changes, but this is the logic and concept of ajax based live search in the table