实时搜索和过滤 Laravel答案

【问题标题】：Real Live Search and Filter Laravel实时搜索和过滤 Laravel
【发布时间】：2019-09-02 19:43:08
【问题描述】：

我是 Laravel 的新手，并尝试在我的项目中实现真正的实时搜索和过滤，但它根本不起作用。我不太了解ajax，只是从其他网站复制粘贴代码。我试图理解代码，我认为它是正确的，但它不起作用，所以请帮忙。谢谢

这是我的控制器

 public function search(Request $request)
{
    if($request->ajax())
    {
        $output = '';
        $query = $request->get('query');
        if($query != '')
        {
            $data = Service::table('service')
                ->where('keterangan', 'like', '%'.$query.'%')
                ->orWhere('biaya', 'like', '%'.$query.'%')
                ->get();
        }
        else
        {
            $data = Service::table('service')
            ->orderBy('kodeService', 'asc')
            ->get();
        }
        $total_row = $data->count();
        if($total_row > 0)
        {
            foreach($data as $row)
            {
                $output .= '
                <tr>
                <td>'.$row->kodeService.'</td>
                <td>'.$row->keterangan.'</td>
                <td>'.$row->biayaService.'</td>
                </tr>
                ';
            }
        }
        else
        {
            $output = '
            <tr>
            <td align="center" colspan="5">No Data Found</td>
            </tr>
            ';
        }
        $data = array(
            'table_data'  => $output
        );
        echo json_encode($data);
    }
}

这是脚本

$(document).ready(function(){
fetch_customer_data();
function fetch_customer_data(query = '')
{
    $.ajax({
            url:"{{ route('live_search.action') }}",
            method:'GET',
            data:{query:query},
            dataType:'json',
            success:function(data)
            {
                $('#table tbody').html(data.table_data);
            }
    });
}

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

});

路线：

Route::resource('service', 'ServiceController');
Route::get('service/search', 'Service@search')->name('live_search.action');

还有 index.blade

 <table class="table table-striped table-hover table-bordered" id="table">
    <thead>
        <tr>
            <th>Kode Service</th>
            <th>Keterangan</th>
            <th>Biaya</th>
            <th>Aksi</th>
        </tr>
    </thead>
    <tbody>
        @foreach($service as $data)
        <tr>
            <td><?= $data->kodeService?></td>
            <td><?= $data->keterangan ?></td>
            <td><?= $data->biayaService?></td>
            <td>

                <a class="btn btn-sm btn-info" href="{{ route('service.edit', $data['kodeService']) }}"> <i class="oi oi-pencil"></i> Edit</a>
                <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#myModal"><span class="oi oi-trash"></span> Hapus</button>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

【问题讨论】：

标签： ajax laravel

【解决方案1】：

这样写你的路线：

Route::get('service/search', 'ServiceController@search')->name('live_search.action');
Route::resource('service', 'ServiceController');

之后打开浏览器控制台面板（按 F12 打开它）并检查网络选项卡中的 Ajax 请求。

如果在“响应”选项卡中有任何特定错误，您可以在哪里获得。

【讨论】：

如果您有实时网址，请与我分享
您是否也将 CSRF 令牌传递给请求？
抱歉，我没有实时网址，也不知道 ajax 请求中的热传递 CSRF 令牌
在页眉中添加这一行：在加载 jquery.js
你成功了没有？

【解决方案2】：

如果你需要一个额外的路由到你的资源路由，你应该把新路由放在资源路由之前。

 Route::get('service/search', 'ServiceController@search')->name('live_search.action');
 Route::resource('service', 'ServiceController');

【讨论】：