Creating an ajax search function

Question

Hello, I am trying to make an ajax search function in my project.

The application first downloads all Clients data to a table on the web page. and If something is printed on the search bar, I want the search data to be displayed instead of all the customer data.

I tried different methods, but none of them worked the way I intended.

First, I added a function to check if it has any value in the search bar, and if it has any value that will try to find in the database and get the data. but if it received no value, it will show all client data by default.

Here is my example script code

// READ records
function readRecords() {
    var searchbar = $("#search").val();
    
    if (searchbar.val() > 0) {
        $.post("ajax/search.php", {
            searchbar: searchbar
        }, function (data, status) {
        $(".records_content").html(data);
        }); 
    } else {
        $.get("ajax/readRecords.php", {}, function (data, status) {
        $(".records_content").html(data);
        });
    }
}

Run codeHide result

Index code snippet

<!-- Content Section -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1>Client List</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="pull-xs-right">
                <button class="btn btn-success" data-toggle="modal" data-target="#add_new_record_modal">Add New Client</button>
            </div>
            <div class="col-sm-3">
                <form class="form-inline global-search" role="form" method="POST" onsubmit="readRecords()">
                    <div class="form-group">
                        <input type="text" class="form-control" id="search"  placeholder="Search">
                        <button type="submit" id="search" class="btn btn-primary">Search</button>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
    <div class="row">
        <div class ="col-lg-12">
            <!--Where the results will be printed-->
            <div class="records_content"></div>
        </div>
    </div>
</div>

Run codeHide result

search.php

<?php 
    if(isset($_POST['search']) && isset($_POST['search']) != "") {
    // include Database connection file  
    include("SQLFunctions.php"); 

    // Design initial table header  
    $data = '<table class="table table-bordered"> 
                        <tr> 
                            <th>No.</th> 
                            <th>Surname</th> 
                            <th>Name</th> 
                            <th>Address</th> 
                            <th>Telephone</th> 
                            <th>Inspection</th> 
                            <th>Model</th> 
                            <th>Serial Number</th> 
                            <th>Notes</th> 
                            <th>A/S Request</th>
                            <th>Update</th> 
                            <th>Delete</th> 
                        </tr>'; 
    
    $search = $_POST['search'];
    
    $searchquery = "SELECT Surname
                ,Name
                ,Address
                ,Telephone
                ,DATE_FORMAT(PurchaseDate, '%Y-%m-%d')
                ,Model
                ,SerialNumber
                ,Notes
                FROM Clients
                WHERE Surname LIKE '%".$search."%' OR Name LIKE '%".$search."%' OR Model Like '%".$search."%'";
    
    $link = connectDB();

    ;
    
    // if query results contains rows then fetch those rows  
    if($result = mysqli_query($link, $searchquery)) 
    { 
        $number = 1; 
        while($row = mysqli_fetch_assoc($result)) 
        { 
            $data .= '<tr> 
                <td>'.$number.'</td> 
                <td>'.$row['Surname'].'</td> 
                <td>'.$row['Name'].'</td> 
                <td>'.$row['Address'].'</td> 
                <td>'.$row['Telephone'].'</td> 
                <td>'.$row['PurchaseDate'].'</td> 
                <td>'.$row['Model'].'</td> 
                <td>'.$row['SerialNumber'].'</td> 
                <td>'.$row['Notes'].'</td> 
                <td> 
                    <button onclick="Request('.$row['id'].')" class="btn btn-primary">A/S Request</button> 
                </td>
                <td> 
                    <button onclick="GetUserDetails('.$row['id'].')" class="btn btn-warning">Update</button> 
                </td> 
                <td> 
                    <button onclick="DeleteUser('.$row['id'].')" class="btn btn-danger">Delete</button> 
                </td> 
            </tr>'; 
            $number++; 
        } 
    } 
    else 
    { 
        // records now found  
        $data .= '<tr><td colspan="6">Records not found!</td></tr>'; 
    } 

    $data .= '</table>'; 

    echo $data;
    }
?> 

Run codeHide result

, , - , .

, .

Answer 1

onsubmit="readRecords(this)"

function readRecords(e) {
    e.preventDefault();
    var searchbar = $("#search").val();

    if (searchbar.val() > 0) {
        $.post("ajax/search.php", {
            searchbar: searchbar
        }, function (data, status) {
        $(".records_content").html(data);
        }); 
    } else {
        $.get("ajax/readRecords.php", {}, function (data, status) {
        $(".records_content").html(data);
        });
    }
}

Answer 2

event.preventDefault() jquery ajax-.

, .