Laravel Live Search Results Display Issue on the View - php

Question

I'm trying to implement a live search in my laravel application.
Following is my index function in the controller (ParticipantController.php). Here if there is no search happens, then displaying the participants by default.
public function index(Request $request)
{
if($request->ajax()){
$data = User::orderBy('id','DESC')
->WHERE('role_id','=','3')
->where('email','LIKE','%'.$request->search."%")
->paginate(12);
return view('admins.participants.index',compact('data'))
->with('i', ($request->input('page', 1) - 1) * 12 );
}
else{
$data = User::orderBy('id','DESC')->WHERE('role_id','=','3')->paginate(12);
return view('admins.participants.index',compact('data'))
->with('i', ($request->input('page', 1) - 1) * 12 );
}
}
following is my view (only included the relevant part)
<div class="row mt-5 ">
<div class="col-md-12 mb-2 text-right">
<input type="text" class="form-controller" id="search" name="search"></input>
</div>
</div>
<div class="row mt-2 participant-row">
#foreach ($data as $key => $user)
<div class="col-md-3 d-flex align-items-stretch mb-4">
<div class="white-panel w-100 ">
<div class="card p-2 ">
<div class="row no-gutters ">
<div class="col-auto my-auto">
#if(empty($user->image_id))
<img src="/propics/default-avatar.png" class="img_participant">
#else
<?php if(file_exists('propics/'.$user->image_id.'')){
echo '<img src="/propics/'.$user->image_id.'" class="img_participant">
';
}else{
echo '<img src="/propics/default-avatar.png" class="img_participant">
';
}?>
#endif
</div>
<div class="col my-auto">
<div class="card-block px-2">
<div class="text-right">
<a class="btn btn-default btn_icon" href="{{ route('participants.edit',$user->id) }}"><i class="fas fa-edit"></i></a>
{!! Form::open(['method' => 'DELETE','route' => ['participants.destroy', $user->id],'style'=>'display:inline']) !!}
{!! Form::button('<i class="fas fa-trash-alt"></i>', ['class' => 'btn btn-default btn_icon','type'=>'submit','onclick'=>'return confirm("Are you sure want to remove this User?")']) !!}
{!! Form::close() !!}
</div>
<hr>
<h4 class="card-title participant_name alas">{{ $user->first_name }} {{ $user->last_name }}</h4>
<p class="card-text participant_email alas">{{ $user->email }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
And set my route as (web.php),
Route::resource('/admins/participants','Admin\ParticipantController');
Following is my Javascript which I included at the bottom of my view
<script type="text/javascript">
jQuery('#search').on('keyup',function(){
$value=jQuery(this).val();
$.ajax({
type : 'get',
url:"{{ route('participants.index') }}",
data:{'search':$value},
success:function(data){
jQuery('.participant-row').html(data);
}
});
})
</script>
Now the issue is when I search for something, as the result, the current code provides me a whole new view inside the old view. It loads a new view (with the menus and all) inside the target div class whichi mentioned in my javascript code.