使用Livewire实现实时搜索时where子句绑定searchTerm不生效

使用Livewire开发实时搜索功能时，通过wire:model完成搜索词与组件属性searchTerm的绑定，但在render方法中使用该变量做LIKE模糊查询时，表格始终返回全量数据，无法展示匹配结果；将查询参数替换为固定字符串时搜索功能可正常运行，动态绑定的搜索词无法作为有效查询参数传入查询构造器。

• 分页状态冲突：引入WithPagination分页trait后，搜索词更新时未重置分页页码，分页状态与查询条件冲突导致查询逻辑失效
• 参数初始值异常：$searchTerm未设置初始值，默认状态下为null，拼接生成的LIKE '%%'条件会匹配全表数据
• DOM结构非法：视图中存在表格标签错误嵌套、多余闭合标签等问题，导致Livewire的DOM对比算法异常，无法触发列表区域的正确重渲染

控制器代码调整 #

1. 为$searchTerm设置空字符串初始值，避免null拼接异常
2. 添加updatedSearchTerm钩子函数，搜索词变更时自动重置分页到第一页
3. 使用when方法做条件查询，仅当搜索词非空时才追加LIKE匹配条件

修复后完整控制器代码：

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Item;
use Livewire\WithPagination;

class Items extends Component
{
    use WithPagination;
    // 初始化搜索词为空字符串
    public $searchTerm = '';

    // 搜索词更新时重置分页
    public function updatedSearchTerm()
    {
        $this->resetPage();
    }

    public function render()
    {
        $items = Item::when($this->searchTerm, function($query) {
                $query->where('itemName', 'LIKE', "%{$this->searchTerm}%");
            })
            ->paginate(6);
        return view('livewire.items', compact('items'));
    }
}

视图代码调整 #

1. 修正非法HTML结构：移除tbody内嵌套的多余div标签，补全缺失的td标签，删除多余的</td>闭合标签，保证DOM结构合法
2. 为搜索框添加防抖修饰符，减少无效请求，提升输入体验

修复后核心视图代码：

<div class="row browse mt-6">
    <div class="col float-left category ">
        <h4 class="float-left font-weight-bold">All Categories</h4> 
        <h4 class="float-left font-weight-bold">Men</h4>  
        <h4 class="float-left font-weight-bold">Women</h4> 
    </div>
    <div class="col search-cat float-right">
        <input 
            type="text" 
            id="search" 
            placeholder="Browse Products" 
            wire:model.live.debounce.300ms="searchTerm"
        />
    </div>
    {{-- 调试绑定状态用，功能正常后可删除 --}}
    {{$searchTerm}}
</div>
<hr style="border-top: dotted 1px;" />

<div class="row w-100 p-1">
    <table class="table-center">
        <tbody>
        @foreach($items as $item)
        <tr class="mx-auto">
            <td>
                <div class="d-inline w-30 item-desc mx-auto m-1">
                    <h4 class="pt-1">{{ $item->itemName }}</h4>
                    <div>
                        <img src="items/{{ $item->itemPic }}.png" alt="" class="item-pic">
                    </div>
                    <div class="row">
                        <div class="col d-inline float-left">
                            Price: US ${{ $item->itemPrice }}
                        </div>
                        <div class="col d-inline float-right">
                            {{ $item->itemCOD }}
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        @endforeach
        </tbody>
    </table>
       
    <hr style="border-top: dotted 1px;" />  
    <div class="pagination-content">
        {{ $items->links('pagination::pagination-custom') }}
    </div>  
    <hr style="border-top: dotted 1px;" />  
</div>

• 若使用Livewire 2.x版本，实时绑定需要添加.live修饰符；Livewire 3.x版本默认输入即实时同步，无需额外加.live
• 若需要支持中文模糊搜索，确认数据库对应字段的字符集为utf8mb4，排序规则选用utf8mb4_general_ci或其他支持中文匹配的规则
• 调试阶段可在render方法中通过dd($this->searchTerm)确认查询时拿到的搜索词参数是否正确，逐步排查问题

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