如何在 laravel 和 mongodb 中使用实时搜索?
How can I use live search in laravel with mongodb?
我在 laravel 中使用实时搜索,我在部门模块中工作,因为部门有 2 个字段名称并由字段创建
我的数据库是 mongoDb,
这是我的查看文件代码,
<div class="table-responsive m-t-40">
<div class="form-group">
<input type="text" name="search" id="search" class="form-control" placeholder="Search Department">
</div>
<table class="table table-bordered table-striped ">
<thead>
<tr>
<th>Department Name</th>
<th>Created By</th>
<th>Created On</th>
@if (App\User::isPermitted(['edit_department', 'update_department', 'delete_department']))
<th>Action</th>
@endif
</tr>
</thead>
<tbody>
@if($listOfDepartment != null)
@foreach($listOfDepartment as $departmentList)
<tr>
<td>{{$departmentList->nameOfDepartment}}</td>
<td>{{$departmentList->createdBy}}</td>
<td>{{$departmentList->created_at}}</td>
@if (App\User::isPermitted(['edit_department', 'update_department', 'delete_department']))
<td>
<a href="{{route('edit_department', $departmentList->id)}}" data-toggle="modal" data-target="#myEditModal"><i class="fa fa-edit fa-lg" style="color:#0066ff" aria-hidden="true"></i></a> 
<a href="{{route('delete_department', $departmentList->id)}}"><i class="fa fa-trash fa-lg" onclick="delete_user(this); return false;" style="color:red" aria-hidden="true"></i></a>
</td>
@endif
</tr>
@endforeach
@endif
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
fetch_customer_data();
function fetch_customer_data(query = '')
{
$.ajax({
url:"{{ route('list_department') }}",
method:'GET',
data:{query:query},
dataType:'json',
success:function(data)
{
$('tbody').html(data.table_data);
}
})
}
$(document).on('keyup', '#search', function(){
var query = $(this).val();
fetch_customer_data(query);
});
});
</script>
@endsection
这是我的路线文件
Route::get('list-department', 'DepartmentController@listDepartment')->name('list_department');
这是我在控制器文件中的代码
public function listDepartment(Request $request)
{
$listOfDepartment = Department::all();
if($request->ajax())
{
$output = '';
$query = $request->get('query');
if($query != '')
{
$data = Schema::table('department')
->where('nameOfDepartment', 'like', '%'.$query.'%')
->orWhere('createdBy', 'like', '%'.$query.'%')
->get();
}
else
{
$data = Schema::table('department')
->orderBy('nameOfDepartment', 'asc')
->get();
}
$total_row = $data->count();
if($total_row > 0)
{
foreach($data as $row)
{
$output .= '<tr>
<td>'.$row->nameOfDepartment.'</td>
<td>'.$row->createdBy.'</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);
}
return view('pages.department', compact('listOfDepartment'));
}
问题是无论我在搜索栏中写什么,它现在都会给出任何输出。
你可以使用 jquery contains
其中 returns 里面的每个字符串
$(document).ready(function(){
var string = 'Any string';
jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
return function( elem ) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
jQuery("tr").hide()//It will hide all the tr elements
jQuery('tr:Contains("'+ string +'")').show();//then will show only tr which has the string
});
这个算法我做过,也用过
我在 laravel 中使用实时搜索,我在部门模块中工作,因为部门有 2 个字段名称并由字段创建 我的数据库是 mongoDb, 这是我的查看文件代码,
<div class="table-responsive m-t-40">
<div class="form-group">
<input type="text" name="search" id="search" class="form-control" placeholder="Search Department">
</div>
<table class="table table-bordered table-striped ">
<thead>
<tr>
<th>Department Name</th>
<th>Created By</th>
<th>Created On</th>
@if (App\User::isPermitted(['edit_department', 'update_department', 'delete_department']))
<th>Action</th>
@endif
</tr>
</thead>
<tbody>
@if($listOfDepartment != null)
@foreach($listOfDepartment as $departmentList)
<tr>
<td>{{$departmentList->nameOfDepartment}}</td>
<td>{{$departmentList->createdBy}}</td>
<td>{{$departmentList->created_at}}</td>
@if (App\User::isPermitted(['edit_department', 'update_department', 'delete_department']))
<td>
<a href="{{route('edit_department', $departmentList->id)}}" data-toggle="modal" data-target="#myEditModal"><i class="fa fa-edit fa-lg" style="color:#0066ff" aria-hidden="true"></i></a> 
<a href="{{route('delete_department', $departmentList->id)}}"><i class="fa fa-trash fa-lg" onclick="delete_user(this); return false;" style="color:red" aria-hidden="true"></i></a>
</td>
@endif
</tr>
@endforeach
@endif
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
fetch_customer_data();
function fetch_customer_data(query = '')
{
$.ajax({
url:"{{ route('list_department') }}",
method:'GET',
data:{query:query},
dataType:'json',
success:function(data)
{
$('tbody').html(data.table_data);
}
})
}
$(document).on('keyup', '#search', function(){
var query = $(this).val();
fetch_customer_data(query);
});
});
</script>
@endsection
这是我的路线文件
Route::get('list-department', 'DepartmentController@listDepartment')->name('list_department');
这是我在控制器文件中的代码
public function listDepartment(Request $request)
{
$listOfDepartment = Department::all();
if($request->ajax())
{
$output = '';
$query = $request->get('query');
if($query != '')
{
$data = Schema::table('department')
->where('nameOfDepartment', 'like', '%'.$query.'%')
->orWhere('createdBy', 'like', '%'.$query.'%')
->get();
}
else
{
$data = Schema::table('department')
->orderBy('nameOfDepartment', 'asc')
->get();
}
$total_row = $data->count();
if($total_row > 0)
{
foreach($data as $row)
{
$output .= '<tr>
<td>'.$row->nameOfDepartment.'</td>
<td>'.$row->createdBy.'</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);
}
return view('pages.department', compact('listOfDepartment'));
}
问题是无论我在搜索栏中写什么,它现在都会给出任何输出。
你可以使用 jquery contains
其中 returns 里面的每个字符串
$(document).ready(function(){
var string = 'Any string';
jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
return function( elem ) {
return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
jQuery("tr").hide()//It will hide all the tr elements
jQuery('tr:Contains("'+ string +'")').show();//then will show only tr which has the string
});
这个算法我做过,也用过