Laravel实现按Message字段筛选工单的搜索栏方案咨询

嘿，作为Laravel新手能想到做搜索功能真的很棒！针对你的需求，我给你两种实用方案——一种是后端数据库层面的筛选（数据量大的时候更高效），另一种是前端实时筛选（小数据量下体验更流畅），你可以根据自己的项目情况选择：

方案一：后端数据库筛选（推荐） #

这种方式会直接在数据库层面过滤数据，再返回给前端，适合工单数量较多的场景，还能和你现有的分页功能兼容。

1. 修改控制器逻辑 #

找到你的工单列表控制器（比如TicketController的index方法），添加搜索参数的处理：

use Illuminate\Http\Request;
use App\Models\Ticket; // 确保引入你的Ticket模型

public function index(Request $request)
{
    // 初始化查询构造器，预加载关联避免N+1查询问题
    $query = Ticket::with(['urgence', 'utilisateur']);

    // 如果存在搜索关键词，添加模糊匹配条件
    if ($request->filled('search')) {
        $searchTerm = $request->input('search');
        $query->where('message', 'LIKE', "%{$searchTerm}%");
    }

    // 保持分页功能
    $tickets = $query->paginate(10);

    return view('你的视图名称', compact('tickets'));
}

2. 前端添加搜索表单&优化分页 #

在你的表格上方添加搜索表单，同时修改分页链接，确保分页时保留搜索关键词：

<div class="panel-body">
    <!-- 搜索表单 -->
    <form method="GET" action="{{ url('/tickets') }}" class="mb-3">
        <div class="input-group">
            <input 
                type="text" 
                name="search" 
                class="form-control" 
                placeholder="搜索工单内容..." 
                value="{{ request('search') }}" <!-- 保留当前搜索关键词 -->
            >
            <button class="btn btn-primary" type="submit">搜索</button>
        </div>
    </form>

    <!-- 你的原有表格代码 -->
    <table class="table table-striped table-bordered table-hovered" id="myTable">
        <tr>
            <td>Objet</td>
            <td>Urgence</td>
            <td>Statut</td>
            <td>Utilisateur</td>
            <td>Actions</td>
        </tr>
        @foreach ($tickets as $ticket)
        <tr>
            <td width="25%">{{ $ticket->message}}</td>
            <td width="25%">{{ $ticket->urgence->niveau}}</td>
            <td width="25%">{{ $ticket->statut}}</td>
            <td width="25%">{{ $ticket->utilisateur->name}}</td>
            <td style='white-space: nowrap'>
                <a href="{{ url('tickets/'.$ticket->id.'/voir')}}" class="btn btn-info">Voir</a>
                <a href="{{ url('tickets/'.$ticket->id.'/delete')}}" class="btn btn-danger" onclick="return confirm('Êtes vous sûr de vouloir supprimmer ce ticket?')">Supprimer</a>
            </td>
        </tr>
        @endforeach
    </table>
    <!-- 分页链接追加搜索参数，确保分页后筛选状态不变 -->
    {{ $tickets->appends(['search' => request('search')])->render() }}
</div>

方案二：前端实时筛选（小数据量适用） #

如果你的工单数量不多，也可以用JavaScript实现前端实时筛选，不用每次都请求后端：

<div class="panel-body">
    <!-- 实时搜索输入框 -->
    <input 
        type="text" 
        id="searchInput" 
        placeholder="实时搜索工单内容..." 
        class="form-control mb-3"
    >

    <!-- 你的原有表格代码 -->
    <table class="table table-striped table-bordered table-hovered" id="myTable">
        <tr>
            <td>Objet</td>
            <td>Urgence</td>
            <td>Statut</td>
            <td>Utilisateur</td>
            <td>Actions</td>
        </tr>
        @foreach ($tickets as $ticket)
        <tr>
            <td width="25%">{{ $ticket->message}}</td>
            <td width="25%">{{ $ticket->urgence->niveau}}</td>
            <td width="25%">{{ $ticket->statut}}</td>
            <td width="25%">{{ $ticket->utilisateur->name}}</td>
            <td style='white-space: nowrap'>
                <a href="{{ url('tickets/'.$ticket->id.'/voir')}}" class="btn btn-info">Voir</a>
                <a href="{{ url('tickets/'.$ticket->id.'/delete')}}" class="btn btn-danger" onclick="return confirm('Êtes vous sûr de vouloir supprimmer ce ticket?')">Supprimer</a>
            </td>
        </tr>
        @endforeach
    </table>
    {{ $tickets->render()}}
</div>

<script>
// 监听搜索输入框的输入事件
document.getElementById('searchInput').addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    // 获取所有表格行（跳过表头）
    const rows = document.querySelectorAll('#myTable tr:not(:first-child)');

    rows.forEach(row => {
        // 获取当前行的Message字段内容
        const messageText = row.querySelector('td:first-child').textContent.toLowerCase();
        // 根据是否包含搜索词显示/隐藏行
        row.style.display = messageText.includes(searchTerm) ? '' : 'none';
    });
});
</script>

两种方案都能实现你要的筛选功能，推荐优先用后端方案，尤其是工单数量增长后，性能会比前端筛选好很多~

内容的提问来源于stack exchange，提问作者Sam