ajax or jquery doesn't show data Laravel

Question

I added a search field to show live my data, but nothing works when I fill that field. I made a route called retour.action , and that's in my controller, so when I try a console.log('test') i can see test in my Console on my browser, but the rest of the code I made doesn't work, and I also get no error

here is my controller

public function action(Request $request)
    {
        if ($request->ajax()) {
            $output = '';
            $query = $request->get('query');
            if ($query != '') {
                $retours = Returnorder::all()
                    ->where('firmaname', 'like', '%' . $query . '%')
                    ->orWhere('ordernumber', 'like', '%' . $query . '%')
                    ->orWhere('status', 'like', '%' . $query . '%')
                    ->get();

            } else {
                $retours = Returnorder::latest('id')->paginate(15);
            }
            $total_row = $retours->count();
            if ($total_row > 0) {
                foreach ($retours as $retour) {
                    $output .= '
        <tr>
         <td>' . $retour->firmaname . '</td>
         <td>' . $retour->ordernumber . '</td>
         <td>' . $retour->status . '</td>
        </tr>
        ';
                }
            } else {
                $output = '<tr>
        <td align="center" colspan="5">Geen data gevonden</td>
       </tr>
       ';
            }
            $retours = array(
                'table_data' => $output,
            );

            echo json_encode($retours);
        }
    }

And this is my script

$(document).ready(function(){

    fetch_customer_data();

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

    $(document).on('keypress', '#search', function(){
        let query = $(this).val();
        fetch_customer_data(query);
    });
});

And the HTML is this

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="mTop">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    @if(session('message'))
                        <div class="alert alert-success" role="alert">
                            {{session('message')}}
                        </div>
                    @endif
                    <div class="card">
                        <div class="card-header">Retourmeldingen</div>
                        <div class="card-body">
                            <div class="form-group" >
                                <label for="search" hidden>Zoeken</label>
                                <input type="text" name="search" id="search" class="form-control"
                                       placeholder="Typ hier uw zoekopdracht in"/>
                            </div>
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th scope="col">Firmanaam</th>
                                    <th scope="col"></th>
                                    <th scope="col"></th>
                                    <th scope="col">Ordernummer</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Verwerkingstijd</th>
                                    <th scope="col">Inzenddatum</th>
                                    <th scope="col"></th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Help me please

Answer 1

I think you first need to be sure that what you're typing is actually being sent back to the router. You can get the value of what you're typing by using this:

 $(function() { $('#search').on('keyup', (e) => { console.log(e.target.value); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="search" type="text" name="search" />