Javascript Laravel-使用Ajax进行搜索，在页面打开时自动搜索

当我在文本框中输入一个值时，我如何自动搜索数据？假设该值是固定的。像这样

那里的值是

10310

，当我打开页面时，我想自动搜索该值。现在我的搜索有一个ajax，它工作得很好。但我的问题是，当我打开页面时，无法通过在文本框中输入值来自动搜索值

预期输出-我想自动搜索文本框中的数据

查看

            <input type="text" name="search" id="search" class="form-control" value="10310" />



    <div id="divContent">

    </div>    

这是我的Ajax脚本

<script type="text/javascript">

    $(document).ready(function(){

    fetch_customer_data();

    function fetch_customer_data(query = '')
    {
    $.ajax({
    url:"{{ route('admin.employeemaintenance.actualTime.actionActualTime') }}",
    method:'GET',
    data:{query:query},
    dataType:'json',
    success:function(data)
    {
    $('#divContent').html(data.table_data);
    $('#total_records').text(data.total_data);
    }
    })
    }

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

</script>

$（文档）.ready（函数（）{
获取客户数据（）；
函数获取客户数据（查询=“”）
{
$.ajax({
url:{{route（'admin.employeemaintenance.actualTime.actionActualTime'）}，
方法：'GET'，
数据：{query:query}，
数据类型：'json'，
成功：功能（数据）
{
$（'#divContent'）.html（data.table_数据）；
$（'total_records'）.text（data.total_data）；
}
})
}
$（文档）.on（'keyup'，'#search'，函数（）{
var query=$（this.val（）；
获取客户数据（查询）；
});
});

我的控制器

 function actionActualTime(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 .= '
    <div class="container">
     <img height="50px" width="60px" src="/storage/employee_photos/'.$row->employee_photo.'" /><span class="d-none">'.$row->employee_photo.'</span><br><br>
     <p><b>Employee No: </b></p><input type="text" class="form-control col-md-2" value='.$row->employee_no.'></input><br>
     <p><b>Name: </b></p><input type="text" class="form-control col-md-3" value='.$row->last_name.'></input><br><hr>
     </div>
    ';
   }
  }
  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);
 }


}

函数操作实际时间（请求$Request）
{
如果（$request->ajax（））
{
$output=''；
$query=$request->get（'query'）；
如果（$query！=''）
{
$data=DB:：表格（'employeefms'）
->其中（'last_name'、'like'、'%'.$query.'%'））
->orWhere（'first_name'，'like'，'%'.$query.'%'））
->或where（'employee_no'、'like'、'%'.$query.'%'））
->get（）；
}
其他的
{
$data=DB:：表格（'employeefms'）
->orderBy（'last_name'，'desc'）
->get（）；
}
$total_row=$data->count（）；
如果（$total_row>0）
{
foreach（$行数据）
{
$output.='
员工照片。“/>”。$row->员工照片。“


员工编号：


姓名：


';
}
}
其他的
{
$output=
没有找到任何数据
';
}
$data=数组(
“表_数据”=>$output，
“总计数据”=>$total\u行
);
echo json_编码（$data）；
}
}
当页面加载时
查询未定义。请尝试以下操作：

<script type="text/javascript">

    $(document).ready(function(){

      var query = $('#search').val();
      fetch_customer_data(query);

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

      function fetch_customer_data(query = '') {
        $.ajax({
          url:"{{ route('admin.employeemaintenance.actualTime.actionActualTime') }}",
          method:'GET',
          data:{query:query},
          dataType:'json',
          success:function(data) {
            $('#divContent').html(data.table_data);
            $('#total_records').text(data.total_data);
          }
        })
      }

    });

</script>


$（文档）.ready（函数（）{
var query=$（'#search'）.val（）；
获取客户数据（查询）；
$（文档）.on（'keyup'，'#search'，函数（）{
var query=$（this.val（）；
获取客户数据（查询）；
});
函数获取客户数据（查询=“”）{
$.ajax({
url:{{route（'admin.employeemaintenance.actualTime.actionActualTime'）}，
方法：'GET'，
数据：{query:query}，
数据类型：'json'，
成功：功能（数据）{
$（'#divContent'）.html（data.table_数据）；
$（'total_records'）.text（data.total_data）；
}
})
}
});
您好，先生，您能解释一下您做了什么吗？顺便说一句，谢谢，但我以前的脚本缺少什么？正如我在上面写的，当您第一次调用函数时，您的var查询没有定义。因此您的脚本被调用时使用了
？query=
@Khanses，明白了，先生，谢谢。我可以在3分钟内接受它作为答案sir@KHanseso最后一个问题，先生，我在textarea和textbox之间有一个更改事件。我还需要的是，当我更改textbox值时，textarea也在更改，我已经成功地做到了这一点，因为当我更改数据值时，它为什么不搜索数据？@Summer在页面加载和键控时调用你的函数。如果你更改
val（）
使用jQuery两者都不会触发。因此，您所要做的就是将
$（“#搜索”）.keyup（）；
添加到更改事件中。