Auto Complete Search

Route::get('/admin/contact/index', [ContactController::class, 'index'])->name('contactIndex');

public function index(Request $request){
        
        $query = Contact::query();
        
        if($request->ajax()){
            $all_data = $query->where('name','LIKE','%'.$request->search.'%')->get();
            return response()->json(['all_data'=>$all_data]);
        }
        
        else{
            $all_data = Contact::query()->get();
            return view('backend.contact.index',compact('all_data'));
        }
        
    }

<div class="container">
        <div class="row">
            <div class="col-12">
                <input type="search" name="search" id="search" class="form-control my-2" placeholder="Search Here">
            </div>
            <div class="col-12">
                <div class="responsive card p-2">
                    <table class="table table-responsive table-hover table-striped">
                    <thead>
                        <tr>
                            <th scope="col" class="text-center">#</th>
                            <th scope="col">Name</th>
                            <th scope="col">Email</th>
                            <th scope="col" class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody id="tbody">
                        @if(count($all_data)>0)
                        @foreach($all_data as $data)
                        <tr>
                            <th scope="row" class="text-center">{{$loop->index+1}}</th>
                            <td>{{$data->name}}</td>
                            <td>{{$data->email}}</td>
                            <td class="text-center">
                                <a href="" class="btn btn-primary mb-1" data-bs-toggle="modal" data-bs-target="#Show{{$data->id}}Modal">Show Message</a>
                                <a href="" class="btn btn-danger mb-1" data-bs-toggle="modal" data-bs-target="#Delete{{$data->id}}Modal">Delete</a>
                            </td>
                        </tr>
                        
                        <div class="modal fade" id="Show{{$data->id}}Modal" tabindex="-1" aria-labelledby="Show{{$data->id}}ModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-xl">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                    <div class="modal-body">
                                        <div class="container">
                                            <div class="row">
                                                <div class="col-12 pb-3 text-center">
                                                    <p class="p-3">{{$data->message}}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="modal fade" id="Delete{{$data->id}}Modal" tabindex="-1" aria-labelledby="Delete{{$data->id}}ModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="Delete{{$data->id}}ModalLabel">Delete</h1>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                    <div class="modal-body">
                                        <div class="container">
                                            <div class="row">
                                                <div class="col-12 pb-3 text-center text-danger">
                                                    <h3>Are you sure ?</h3>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        <a href="{{url('/admin/contact/delete',$data->id)}}" class="btn btn-danger">Delete</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @else
                        <tr>
                            <td colspan="4">No Data Found</td>
                        </tr>
                        @endif
                    </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>