Live search in Laravel 5.8 using AJAX doesn't show results in the table

I see you are using

 echo json_encode($data);

In Laravel I usually use:

return Response::json($data);

Don't forget to have the use statement:

use Illuminate\Support\Facades\Request;
use Illuminate\Support\Facades\Response;

Thanks for your help, appreciated. But unfortunately the problem persists despite the corrections.

Did you inspect the response of AJAX query inside the Developer Tools? Does variable $output contain what you want?

Thanks for the answers, I finally solved the problem moving the script inside the html part avoiding to use "@push('head')", and adding "script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"" at the begging of the view.

I think I followed the same guide as you. I also have the same problem like u. How exactly did u fix it? Thanks in advance.

Hello, sorry for the late reply, I will post my working solution:

The controller:

function action (Request $request)
    {
     
            if ($request->ajax()) {
                $output = '';
                $query = $request->get('query');
                if ($query != '') {
                    $data = DB::table('users')
                        ->join('dati_percorso', 'users.id_utente', '=', 'dati_percorso.id_utente')
                        ->select('users.email', 'users.nome', 'users.cognome', 'users.password_in_chiaro', 'users.attivo', 'dati_percorso.inizio')
                        ->where('users.attivo', 'like', '%' . '1' . '%')
                        ->where('users.nome', 'like', '%' . $query . '%')
                        ->orWhere('users.cognome', 'like', '%' . $query . '%')
                        ->orderBy('dati_percorso.inizio', 'desc')
                        ->get();
                } else {
                    $data = DB::table('users')
                        ->join('dati_percorso', 'users.id_utente', '=', 'dati_percorso.id_utente')
                        ->select('users.email', 'users.nome', 'users.cognome', 'users.password_in_chiaro', 'users.attivo', 'dati_percorso.inizio')
                        ->where('users.attivo', 'like', '%' . '1' . '%')
                        ->orderBy('dati_percorso.inizio', 'desc')
                        ->get();
                }
                $total_row = $data->count();

                if ($total_row > 0) {
                    foreach ($data as $row) {

                        $inizio = Carbon::parse($row->inizio)->format('d.m.Y');
                        $output .= '
                    <tr>
                    <td>' . $row->nome . '</td>
                    <td>' . $row->cognome . '</td>
                    <td>' . $row->email . '</td>
                    <td>' . $row->password_in_chiaro . '</td>
                    <td>' . $inizio . '</td>
                    </tr>
                    ';
                    }
                } else {
                    $output .= '
                <tr>
                <td align="center" colspan="5">
                Nessun utente trovato, importa i dati.
                </td>
                </tr>
                ';
                }
                $data = array(
                    'table_data' => $output
                );
                echo json_encode($data);
            }
        }

The view:

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

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-10">
                <h2>Lista dati di accesso degli utenti</h2>
            </div>
        </div>
        <div class="form-group">
            <input type="text" name="search" id="search" class="form-control"
                   placeholder="Cerca utenti"/>
        </div>
        <div class="table-responsive">
            <table class="table table-hover table-sm">
                <thead>
                <tr>
                        <th>Nome</th>
                        <th>Cognome</th>
                        <th>Email</th>
                        <th>Password</th>
                        <th>Attivo dal</th>
                 
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
        </br>
        <a href="{{ route('formatore.dashboard') }}">
            <button type="button" class="btn btn-secondary btn-lg btn-block">Torna alla home</button>
        </a>
    </div>

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

            fetch_customer_data();

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

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

I hope it will help.

i have same problem too, im using laravel 7, please advice : here is my controller

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;

class LivesearchController extends Controller
{
    public function indexing()
	{
		return view('pages.evaluation.eval-search');
	}
function search(Request $request)
	{
		if($request->ajax())
		{
			$output = '';
			$query = $request->get('query');
			if($query != '')
			{
				$data = DB::table('department')
					->where('name', 'like', '%'.$query.'%')
->get();
			}
			else
			{
				$data = DB::table('department')
					->orderBy('emp_id', 'desc')
					->get();
			}
				$total_row = $data->count();
if($total_row > 0)
				{
					foreach($data as $row)
					{
						$output .=
							'<tr>
								<td>'.$row->id.'</td>
								<td>'.$row->emp_id.'</td>
								<td>'.$row->name.'</td>
								<td>'.$row->dept.'</td>
								<td>'.$row->sec.'</td>
								<td>'.$row->subsec.'</td>
								<td>'.$row->group.'</td>
								<td>'.$row->subgroup.'</td>
							</tr>';
					}
				}
				else
				{
					$output .= 
						'<tr>
							<td align="center" colspan="5"> No Data Found</td>
						</tr>';
				}
				$data = array(
					'table_data' => $output,
					'total_data' => $total_row
					);
				return Response::json($data);

view :

@extends('layouts.app')

@section('content')
@push('scripts')
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script>
		$(document).ready(function(){

 fetch_customer_data();

 function fetch_customer_data(query = '')
 {
  $.ajax({
   url: "{{route('pages.evaluation.search')}}",
   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>
@endpush
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @endif

                    <div class="card-body">
						<h4 class="card-title">Search Employee</h4>
						<div class="form-group">
							<input type="text" name="search" id="search" class="form-control" placeholder="type id pegawai" />
						</div>
						<div class="table-responsive">
							<h3 align="center">Total Data : <span id="total_records" name="total_records"></span></h3>
							<table class="table table-striped table-bordered">
								<thead>
									<tr>
										<th> id </th>
										<th> nama </th>
										<th> departemen </th>
										<th> section </th>
										<th> sub section </th>
										<th> group </th>
										<th> sub group </th>
									</tr>
								</thead>
								<tbody>
									
								</tbody>
							</table>
						</div>
					</div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

route:

Route::get('/pages/evaluation', 'LivesearchController@indexing');
Route::get('/pages/evaluation/search', 'LivesearchController@search')->name('pages.evaluation.search');