Laravel Livewire实时搜索无法正确清除旧结果更新搜索列表

问题表现 #

编写Livewire实现页面标题搜索功能，首次搜索运行正常，后续搜索无法完全清除上一次返回的旧结果，复现规律如下：

• 搜索关键词“Page”时，可正常返回结果：My Page 1、Page 2、Wonderful Page 3
• 将搜索词修改为“Page Z”时，返回结果异常，混合显示旧结果和无结果提示：
  • My Page 1
  • Page 2
  • No results found
• 继续将搜索词修改为“Page Zz”时，异常仍存在：
  • My Page 1
  • No results found

原有代码 #

后端组件代码 #

namespace App\Http\Livewire\Page;

use App\Models\Page;
use Livewire\Component;

class Search extends Component
{
    public $searchQuery = "";
    public $searchResults;

    public function resetSearchValue() {
        $this->searchQuery = "";
    }

    public function mount() {
        $this->reset();
    }

    public function render()
    {
        if(strlen($this->searchQuery) > 2) {
            $this->searchResults = Page::query()
                ->select(['title', 'slug'])
                ->where('title', 'like', "%{$this->searchQuery}%")
                ->get();
        }
        return view('livewire.page.search');
    }
}

前端Blade模板代码 #

<div>
    <input 
        wire:model.debounce.350ms="searchQuery" 
        @focus="searchFocused = true" 
        @blur="searchFocused = false" 
        @click.outside="$wire.resetSearchValue()" 
        autocomplete="off" 
        type="text" 
        placeholder="Search..." 
        id="sitesearch" 
    >
    @if(strlen($searchQuery) > 0)
        <div  
            role="menu" 
            aria-orientation="vertical" 
            -labelledby="menu-button" 
            tabindex="-1"
        >
            <div class="py-1" role="none">
                @if(strlen($searchQuery) > 2)
                    @if($searchResults->count() > 0)
                        @foreach($searchResults as $result)
                            <a 
                                href="{{ route('pages.index', $result->slug) }}"
                                role="menuitem" 
                                tabindex="-1" 
                                id="menu-item-0"
                            >{{ $result->title }}</a>
                        @endforeach
                    @else
                        <p>
                            No results found
                        </p>
                    @endif
                @else
                    <p>
                        You need to type at least 3 characters
                    </p>      
            </div>     
        </div>
    @endif
</div>

问题原因 #

1. 后端逻辑漏洞：仅在搜索词长度大于2时为$searchResults赋值，当搜索词长度变化、新搜索返回空结果时，没有重置该变量，上一次的搜索结果会一直保留在组件属性中。
2. 前端DOM追踪失效：循环渲染搜索结果时未给元素添加唯一wire:key标识，Livewire做DOM差异对比时无法精准识别需要删除/更新的节点，导致旧DOM残留。
3. 模板语法错误：前端Blade模板缺失@if(strlen($searchQuery) > 2)对应的@endif闭合标签，DOM结构错乱加剧渲染异常。

修复方案 #

1. 调整后端逻辑 #

每次渲染前先初始化空结果集，同时在重置搜索词方法中同步清空结果，避免旧数据残留：

// 调整resetSearchValue方法
public function resetSearchValue() {
    $this->searchQuery = "";
    $this->searchResults = collect();
}

// 调整render方法
public function render()
{
    // 先初始化空集合，覆盖上一次的搜索结果
    $this->searchResults = collect();
    if(strlen($this->searchQuery) > 2) {
        $this->searchResults = Page::query()
            ->select(['title', 'slug'])
            ->where('title', 'like', "%{$this->searchQuery}%")
            ->get();
    }
    return view('livewire.page.search');
}

2. 修复前端模板 #

补全缺失的标签闭合，为所有动态渲染的节点添加唯一wire:key，保证Livewire可精准追踪DOM变化：

<div>
    <input 
        wire:model.debounce.350ms="searchQuery" 
        @focus="searchFocused = true" 
        @blur="searchFocused = false" 
        @click.outside="$wire.resetSearchValue()" 
        autocomplete="off" 
        type="text" 
        placeholder="Search..." 
        id="sitesearch" 
    >
    @if(strlen($searchQuery) > 0)
        <div  
            role="menu" 
            aria-orientation="vertical" 
            aria-labelledby="menu-button" 
            tabindex="-1"
        >
            <div class="py-1" role="none">
                @if(strlen($searchQuery) > 2)
                    @if($searchResults->count() > 0)
                        @foreach($searchResults as $result)
                            <a 
                                wire:key="search-result-{{ $result->slug }}"
                                href="{{ route('pages.index', $result->slug) }}"
                                role="menuitem" 
                                tabindex="-1"
                            >{{ $result->title }}</a>
                        @endforeach
                    @else
                        <p wire:key="search-no-result">
                            No results found
                        </p>
                    @endif
                @else
                    <p wire:key="search-length-tip">
                        You need to type at least 3 characters
                    </p>
                @endif
            </div>     
        </div>
    @endif
</div>

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