Laravel - Ajax дублирует данные в реальном времени

Question

моя проблема - дубликаты данных, когда я добавил поиск в режиме реального времени или нет, дублируются данные, почему?

На моем контроллере у меня есть этот кодПожалуйста, проверьте, я думаю, что это где данные дублируются или я ошибаюсь?

function action(Request $request)
{
 if($request->ajax())
 {
  $output = '';
  $query = $request->get('query');
  if($query != '')
  {
   $data = DB::table('employeefms')
     ->where('last_name', 'like', '%'.$query.'%')
     ->orWhere('first_name', 'like', '%'.$query.'%')
     ->orWhere('employee_no', 'like', '%'.$query.'%')
     ->get();

  }
  else
  {
   $data = DB::table('employeefms')
     ->orderBy('last_name', 'desc')
     ->get();
  }
  $total_row = $data->count();
  if($total_row > 0)
  {
   foreach($data as $row)
   {
    $output .= '
    <tr>
     <td>'.$row->employee_no.'</td>
     <td>'.$row->last_name.'</td>
     <td>'.$row->first_name.'</td>
     <td>'.$row->middle_name.'</td>
     <td>'.$row->nick_name.'</td>
    </tr>
    ';
   }
  }
  else
  {
   $output = '
   <tr>
    <td align="center" colspan="5">No Data Found</td>
   </tr>
   ';
  }
  $data = array(
   'table_data'  => $output,
   'total_data'  => $total_row
  );

  echo json_encode($data);
 }
}

это мой Ajax код

можетВы также, пожалуйста, проверьте этот ajax, что, если есть что-то, что вызывает, почему это дублирует?

<script type="text/javascript">

    $(document).ready(function(){

    fetch_customer_data();

    function fetch_customer_data(query = '')
    {
    $.ajax({
    url:"{{ route('admin.employeemaintenance.show.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>

мой Маршруты

Route::get('/admin/employeemaintenance/show/action', 'Admin\EmployeeFilemController@action')->name('admin.employeemaintenance.show.action');

my Просмотреть таблицу

пожалуйста, посмотрите здесь, если мне нужно что-то добавить сюда

 @foreach ($employees as $employee)
    <tbody>
      <tr>
        <td>{{ $employee->employee_no}}</td>
        <td>{{ $employee->last_name}}</td>
        <td>{{ $employee->first_name}}</td>
        <td>{{ $employee->middle_name}}</td>
        <td>{{ $employee->nick_name}}</td>

Answer 1

У вас есть тег tbody для каждого сотрудника, и ваш javascript вставляет ответ ajax во всех из них:

$('tbody').html(data.table_data);

Попробуйте переместить foreach внутрь tbody и просто зациклитенад tr элементами:

<tbody>
    @foreach ($employees as $employee)
        <tr>
            <td>{{ $employee->employee_no}}</td>
            <td>{{ $employee->last_name}}</td>
            <td>{{ $employee->first_name}}</td>
            <td>{{ $employee->middle_name}}</td>
            <td>{{ $employee->nick_name}}</td>