Livewire 搜索未产生任何结果答案

【问题标题】：Livewire search not making any resultsLivewire 搜索未产生任何结果
【发布时间】：2022-01-09 02:33:27
【问题描述】：

我是 Livewire 的新手，有一些 laravel 经验和大量 php 经验。我的问题我正在尝试让 livewire 搜索组件工作。我正在使用 laravel 8 并安装了 livewire。我的导航菜单正在使用 livewire。所以我希望在我的布局中插入如下搜索：

    <body class="font-sans antialiased">
        <x-jet-banner />

        <div class="min-h-screen bg-gray-100">
            @livewire('navigation-menu')
            @livewire('search-accounts')
            ... rest of my layout ...
       </div>
   </body>

我有一个模型帐户，其中包含我的应用使用的帐户。帐户使用 Eloquent 并且运行良好。

我创建了一个livewire组件app/Http/Livewire/SearchAccounts.php，内容如下：

<?php

namespace App\Http\Livewire;

use App\Models\Account;
use Livewire\Component;

class SearchAccounts extends Component
{
    public $search = '';

    public function render()
    {
        return view('livewire.search-accounts', [
            'accounts' => Account::where( 'name', $this->search )->get(),
        ]);
    }

}

我的刀片模板是 resouces/views/livewire/search-accounts.blade.php，如下：

    <div class="px-4 space-y-4 mt-8">
        <form method="get">
            <input class="border-solid border border-gray-300 p-2 w-full md:w-1/4"
                   type="text" placeholder="Search Accounts" wire:model="search"/>
        </form>
        <div wire:loading>Searching accounts...</div>
        <div wire:loading.remove>
            <!--
                notice that $search is available as a public
                variable, even though it's not part of the
                data array
            -->
            @if ($search == "")
                <div class="text-gray-500 text-sm">
                    Enter a term to search for accounts.
                </div>
            @else
                @if($accounts->isEmpty())
                    <div class="text-gray-500 text-sm">
                        No matching result was found.
                    </div>
                @else
                    @foreach($accounts as $account)
                        <div>
                            <h3 class="text-lg text-gray-900 text-bold">{{$account->name}}</h3>
                            <p class="text-gray-500 text-sm">{{$account->url}}</p>
                            <p class="text-gray-500">{{$account->ipaddress}}</p>
                        </div>
                    @endforeach
                @endif
            @endif
        </div>
    </div>

当我在浏览器中查看我的应用程序时，会显示搜索栏并包含一个名为 Search Accounts 的占位符。我单击搜索栏并开始输入，但没有完成搜索（我的浏览器开发工具显示没有网络或控制台活动）。

我错过了什么吗？我试过php artisan livewire:discover 并清除了缓存。我遵循了一个教程 (https://laravel-livewire.com/)，但不确定为什么我没有得到预期的结果。像这样的其他帖子实际上正在获得一些网络活动，因为发出了我根本没有看到的 ajax 请求。

谢谢

克雷格

【问题讨论】：

标签： php laravel laravel-8 laravel-livewire

【解决方案1】：

尝试更改此设置

<input class="border-solid border border-gray-300 p-2 w-full md:w-1/4"
                   type="text" placeholder="Search Accounts" wire:model="search"/>

到

<input class="border-solid border border-gray-300 p-2 w-full md:w-1/4"
                   type="text" placeholder="Search Accounts" wire:model.debounce.500ms="search"/>

这应该在事件发生后最多每 500 毫秒发送一次网络请求（有助于避免每次按键都敲击后端）。

看看这个页面的文档https://laravel-livewire.com/docs/2.x/actions

【讨论】：

嗨 Martin，我按照您的建议更改了输入，但在我的 Firefox 开发工具网络选项卡中仍然没有发生任何事情，并且没有提供任何结果（或者如果我在搜索框中输入随机文本，则没有匹配结果. 感谢您的链接，这将有助于我完成这项工作后计划的任务。
嗯，你可以试试wire:keydown吗？
我改成wire:keydown="search" 还是没有反应。我注意到我的 ide (phpstorm) 以红色突出显示线，当我查看为什么会这样时，它说命名空间“线”未绑定。不确定这是否有帮助或者是红鲱鱼。

【解决方案2】：

原来我的@livewireScripts 没有包含在我的主刀片模板中。添加后，livewire 就可以工作了。

【讨论】：