Amalmax
314
2
Laravel

not working ajax live search in laravel

Posted 10 months ago by Amalmax

I have develop live search system using ajax in laravel 5.6 app. My Controller as LiveSearch.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class LiveSearch extends Controller
{
    function index()
    { 
        return view('live_search');
    }

    function action(Request $request)
    {
         if($request->ajax())
         {
            $query = $request->get('query');
            if($query != '')
            {
                $data = DB::table('tbl_customers')
                      ->where('CustomerName','like','%'.$query.'%')
                      ->orWhere('Address','like','%'.$query.'%')
                      ->orWhere('City','like','%'.$query.'%')
                      ->orWhere('PostalCode','like','%'.$query.'%')
                      ->orWhere('Country','like','%'.$query.'%')
                      ->orderBy('CustomerID','desc')
                      ->get();
            }
            else
            {
                $data = DB::table('tbl_customers')
                       ->orderBy('CustomerID', 'desc')
                       ->get();
            }

            $total_row = $data->count();
            if($total_row > 0)
            {
                foreach($data as $row)
                {
                    $output .= '
                    <tr>
                    <td>'.$row->CustomerName.'</td>
                    <td>'.$row->Address.'</td>
                    <td>'.$row->City.'</td>
                    <td>'.$row->PostalCode.'</td>
                    <td>'.$row->Country.'</td>

                    </tr>

                    ';
                }

            }
            else
            {
                $output = '
                 <tr>
                 <td align="center" colspan="5"> No Data Found</td>
                 </tr>
                ';
            }
            $data = array(
              'table_data' => $output,
              'total_data' => $total_data
            );

            echo json_encode($data);
         }
    }
}

blade file as live_search.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Live Search Using Ajax</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>

    <br>
    <div class="container box">
        <h3 align="center">Live Search in Laravel using Ajax</h3><br>
        <div class="panel panel-default">
            <div class="panel-heading">Search Customer Data</div>
            <div class="panel-body">
                <input type="text" name="search" id="search" class="form-control" placeholder="Search Customers Data"/>
                <div class="table-responsive">
                    <h3 align="center">Total Data:<span id="total_records"></span></h3>
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>Customer Name</th>
                                <th>Address</th>
                                <th>City</th>
                                <th>Postal Code</th>
                                <th>Country</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

<script>
    $(document).ready(function(){

        fetch_customer_data();
     
     function fetch_customer_data(query = '')
     {
        $.ajax({
            url:"{{ route('live_search.action') }}",
            method:'GET',
            data:{query:query},
            dataType:'json'
            success:function(data)
            {
                $('tbody').html(data.table_data);
                $('#total_records').text(data.total_data);
            }
        })
     }

     $(document).on('keyup','#search',function(){
       var query = $(this).val();
       fetch_customer_data(query);
     });
    });
</script>

and route.php

Route::get('/live_search','[email protected]');
Route::get('/live_search','[email protected]')->name('live_search.action');

My 'tbl_customers' table structure is,

CustomerID   CustomerName  Address  City PostalCode   Country

but when I visit using this route localhost:8000/live_search i could not see any data showing only empty page here how can fix this ?

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.