如何在mongodb的laravel中使用实时搜索？

Question

I am using live search in laravel, I am working in department module, in that there is 2 field name of department and created by fields My database is mongoDb, here is my view file code,

                    <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>&emsp;
                                                    <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

here is my route file

Route::get('list-department', 'DepartmentController@listDepartment')->name('list_department');

Here is my code in controller file

  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'));
    }

the issue is that whatever I wrote in search bar it now give any output.

Answer 1

You can use jquery contains which returns every string which is its inside

 $(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
});

I have made this algorithm and also used this