Live Data Searching using Ajax & PHP with Mysql 2022 | CodeWithNizami.

Dear friends in this article we will tell you How to Live Data Searching using Ajax & PHP with Mysql 2022. So i hope you like our article because here you can get the source code free and this code you can use in your projects. Guys if you learn more interesting articles then go to search bar and type article name then you can find easily more interested articles.

Folder Structure

Friends, first of all if you make this live data searching using ajax & php then we will download a code editor and then install it. In this article, we have used vs code, if you want, you can also take any other editor. So first we have to open the code editor, then create a new folder in it and save it by going to the htdocs folder of your xampp. After that we have to create an html file inside this folder. Then we have to create a file of php for database connectivity whose name will be config. Then we will create another php file named search.

1. index.html (This file for create frontend)

2. config.php (This file for create database connectivity)

3. view.php (This file for get the data in table from mysql)

4. search.php (This file for find name or rollno from from mysql)

5. style.css (This file for design table)

Front End Design

Now we have to go to the Bootstrap website and from there we have to copy the started template and paste it in our html file, after that we will go to the Bootstrap site again and we have to search the table in the left side. Then we have to copy the code of that table and come to our index file, then we have to take a container class. After that we have to take a row class, then we have to take only one col whose size we will keep 8, after that we have to paste that table inside the col-md-8.

HTML Code.

<div class="container">
        <div class="row mt-5">
            <div class="col-md-8 m-auto">
                <input class="form-control w-100" type="text" id="search" placeholder="Search Data From Table.." autocomplete="off">
                <table class="table">
                    <thead>
                      <tr>
                        <th scope="col">Id</th>
                        <th scope="col">Student Name</th>
                        <th scope="col">Student Class</th>
                        <th scope="col">Student Roll No.</th>
                      </tr>
                    </thead>
                    <tbody id="printData">
                      
                     
                    </tbody>
                  </table>
            </div>
        </div>
    </div>

Here we are using ajax code in the index.html file under script tag. And you can used in js file.

$(document).ready(function(){
            function allData(){
                $.ajax({
                    url:"view.php",
                    type:"POST",
                    dataType:"html",
                    success: function(result){
                    $('#printData').html(result);
                    }
                })  
            }
            allData();

            //searching data from table
            $('#search').keyup(function(){
                var myData = $(this).val();
                $.ajax({
                    url:"search.php",
                    type: "POST",
                    dataType:"html",
                    data:{
                        id:myData
                    },
                    success: function(res){
                    $('#printData').html(res);
                    }
                })
            })
        })

Backend Coding

Now we have to go to phpmyadmin panel and create a database which we will name searchDatabase after that we have to create a table in that database we will name it as searchTable then we have to take 4 fields in the table 1 will be for our id and 2 for name And 3 for class and 4 for rollno and get this data from table then you can make this live data searching using ajax & php project.

After that we have to do the connectivity of our database. To create a connection, you have to go to the config file and paste the following code in it.

Connectivity with Database

<?php
$conn = mysqli_connect("localhost","root","","livesearching");
if(!$conn){
    echo "not connected";
}

?>

view.php

<?php
include('config.php');

$getData = "SELECT * FROM `searchingtable`";
$runQuery = mysqli_query($conn,$getData);

while($showData = mysqli_fetch_array($runQuery)){
    ?>
      <tr>
        <th scope="row"><?php echo $showData['id']; ?></th>
        <td><?php echo $showData['name']; ?></td>
        <td><?php echo $showData['class']; ?></td>
        <td><?php echo $showData['rollno']; ?></td>
      </tr>
    <?php
}
?>

search.php

<?php
include('config.php');

$finData = $_POST['id'];

$getData = "SELECT * FROM `searchingtable` WHERE name LIKE '%{$finData}%' OR class LIKE '%{$finData}%'";
$runQuery = mysqli_query($conn,$getData);

while($showData = mysqli_fetch_assoc($runQuery)){
    ?>
      <tr style="background-color: #333; color:#fff;">
        <th scope="row"><?php echo $showData['id']; ?></th>
        <td><?php echo $showData['name']; ?></td>
        <td><?php echo $showData['class']; ?></td>
        <td><?php echo $showData['rollno']; ?></td>
      </tr>
    <?php
}
?>

Watch Video Related this Article.