Making search function ajax

Question

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

The app loads all Clients data into table on the webpage first. and If something is typed on the searchbar, I want searched data to be shown instead of all clients data.

I tried various ways but none of them worked out as I intended to.

Firstly I added function to check if it has any value within searchbar and if it has any value it will try to find within database and fetch data. but if it hasn't got any 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);
        });
    }
}

Code snippet of index

<!-- 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>

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;
    }
?> 

When I run this project, everything work properly but When I enter any value into searchbar it gives same all results of clients.

I am trying to figure out which is the best way to make this function functioning. Any tips would be appreciated thank you in advance

Answer 1

use event.preventDefault() method of jquery before calling the ajax request.

If this method is called, the default action of the event will not be triggered.

Answer 2

Prevent the default submit event

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);
        });
    }
}