This blog will explain to you how to search data from the MySQL database using PHP, Ajax, and JQuery with an example where search result will be displayed as you type something in the textbox. The data will be populated asynchronously for which Ajax has been used in this blog.

Database: I’m assuming that you created database and table for tbl_user (Fields: user_name ,en_no  ,city,  user_img,gender ,hobbies).

In this code, I used JQuery and Ajax for searching data from database using keyup features of the textbox. So, when user types in the textbox and if that text related data store in the database then you can see related data below the textbox.

Step 1. First of all create .php file in C:\XAMPP\htdocs and give appropriate folder name. I created file name ajaxsearch.php.  

ajaxsearch.php

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Ajax Search</title>

    <style>

        .inputsearch

        {

            width: 50%;

            height: 30px;

            border-color: grey;

            padding-left: 10px;

            font-size: 15px;

        }

        table

        {

            width:100%;

            text-align:center;

            margin-top:20px;

        }

        th

        {

            height: 30px;

            background-color: grey;

        }

        tr

        {

            background-color: #eceaea;

        }

    </style>

</head>

<body>

    <center>

        <h1>Ajax Data Search using JQuery PHP MySQL</h1>

        <form>

            <input type="text" name="searchdata" id="searchdata" class="inputsearch" placeholder="Search data here username or city wise..">

        </form>

        <div id="showdata">

        </div>

    </center>

</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>

            $(document).ready(function(){

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

  

                var txt = $(this).val();

  

                if(txt != '')

                {

                    $('#showdata').html('');

                    $.ajax({

                      url: "fetchuserdata.php",

                      method: "post",

                      data: {search:txt},

                      dataType: "text",

                      success: function(data)

                      {

                        $('#showdata').html(data);  

                      }

                    });

                 }

              });

            });

        </script>

</html>

Step 2. After that creating above file for getting data from the database. I have created fetchuserdata.php file.  

fetchuserdata.php

<?php

  

$con    = new mysqli("localhost", "root", "", "demo"); /* Databse connectivity */

  

$search = $_REQUEST["search"];

$output = '';

$res = $con->query("select * from tbl_user where user_name LIKE '" . $search . "%' or city LIKE '" . $search . "%'") or die(mysqli_error($con));

if (mysqli_num_rows($res) > 0)

{

    $output .= '<table border="2">

                    <thead>

                      <tr>

                        <th>User Name</th>

                        <th>Enrollment No</th>

                        <th>City</th>

                        <th>Profile</th>

                        <th>Gender</th>

                        <th>Hobbies</th>

                      </tr>

                     </thead>

                     <tbody>';

  

    while ($row = mysqli_fetch_array($res))

    {

        $output .= '<tr>

                      <td>' . $row["user_name"] . '</td>

                      <td>' . $row["en_no"] . '</td>

                      <td>' . $row["city"] . '</td>

                      <td><img src="images/' . $row["user_img"] . '" height="100" width="100"></td>

                      <td>' . $row["gender"] . '</td>

                      <td>' . $row["hobbies"] . '</td>

                    </tr>';

    }

  

    $output .= '</tbody>

              </table>';

    

    echo $output;

}

else

{

    echo "<h3>Record not found..!!</h3>";

}

?>

Output

Note: There will no data be display when the page loads first time. When you type in textbox and if related that text data available in the database then you can see the data below the textbox.