[英]Laravel - Search using Ajax, Automatically search when page is open
當我在文本框中放置一個值時,如何自動搜索數據,假設該值是固定的。 像這樣<input type="text" name="search" id="search" class="form-control" value="10310" />
那里的值是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>
我的控制器
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);
}
}
當頁面加載query
未定義。 請嘗試以下操作:
<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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.