【高速搜索】使用 Laravel 和 Livewire 实现增量搜索

您好！我是网络服务部的白井，我对 JavaScript 不是很精通。

这次，我想介绍一下 Livewire，它面向像我这样的人，可以像常规的服务器端开发一样进行实现，几乎不需要 JavaScript。

我们将使用 Laravel 和 Livewire 来实现一个简单的增量搜索功能，请大家来看看！

什么是增量搜索？

增量搜索，也称为字面搜索或顺序搜索，是一种搜索功能，它会在用户于输入字段中输入字符时自动筛选并显示搜索结果。

换句话说，这是一个可以根据你的输入实时缩小搜索结果范围，并动态显示搜索结果的系统。

普通搜索中，您输入字符 → 搜索 → 显示搜索结果；但增量搜索中，每次输入字符都会返回搜索结果！

Livewire是什么？

Livewire是一个基于 Laravel 的 PHP 动态组件库。

它提供了一种在 PHP 中编写服务器端代码的同时实现实时 UI 更新和交互的方法。

因此，通过使用 Livewire，可以开发出只需要极少 JavaScript 代码的响应式 Web 应用程序。

这次，让我们在 Laravel 中使用 Livewire 来实现增量搜索功能！

版本信息

本文中使用的框架和库版本如下：

Laravel 11.1.1 Livewire 3.4.9 PHP 8.3.4

现在让我们来实施它。

安装 Livewire 非常简单。

在 Laravel 项目 composer.json 文件所在的目录中：

composer 需要 livewire/livewire

直接用 Composer 安装就行了。

安装好 Livewire 之后，下一步是创建一个执行增量搜索的组件。

这次我们要搜索用户，所以我们将使用以下命令创建一个用户搜索组件。

php artisan make:livewire 用户搜索

运行该命令后，您将看到 UserSearch 类和视图已创建。

接下来，实现逻辑类。

这次，当您在表单中输入姓名或电子邮件地址时，将返回与其中之一匹配的搜索结果。

<?php namespace App\Livewire; use Livewire\Component; use App\Services\User\ListUsersService; class UserSearch extends Component { // 検索文字列を保持するプロパティ public $search = ''; // コンポーネントの描画を担当するメソッド public function render(ListUsersService $listUsersService) { // ユーザー一覧を取得し、検索文字列に基づいてフィルタリング $users = $listUsersService-> list()->filter(function ($user) { return str_contains($user->name, $this->search) || str_contains($user->email, $this->search); }); // 渲染视图并返回过滤后的用户列表 return view('livewire.user-search', ['users' => $users]); } }

将 $search 定义为保存搜索字符串的属性，该属性将包含用户在搜索表单中输入的字符。

流程是从 ListUsersService 获取用户列表，按用户名或电子邮件地址进行筛选，并将返回的结果传递给组件的视图。

接下来，我们将实现视图部分。

<div>{{--表单中输入的值会实时反映在 $search 属性中，组件会在 100 毫秒后渲染--}} <input type="text" class="form-control" placeholder="名前orメールアドレスで検索" wire:model.live.debounce.100ms="search"> {{--仅当 $search 属性不为空时才以表格格式显示搜索结果--}} @if($search)<table class="mt-3 w-100"><thead><tr><th scope="col">姓名</th><th scope="col">电子邮件</th><th scope="col"></th></tr></thead><tbody>@forelse($users as $user)<tr><td> {{ $user->name }}</td><td> {{ $user->email }}</td><td> <button type="button" class="btn btn-success" wire:click="detail({{ $user->id }})">细节</button></td></tr>{{--如果没有找到搜索结果--}} @empty<tr><td colspan="3" class="text-center">您的搜索没有找到任何结果。</td></tr> @endforelse</tbody></table> @endif</div>

简单来说，我们将使用 Livewire 数据绑定来实现表单功能，用户填写完表单后，搜索结果将以表格形式返回。

现在，用于搜索用户的组件已经完成，最后，在 Blade 文件中你想加载它的部分，

@livewire('user-search') @livewireScripts

如果加载上述指令，则这次创建的组件将被加载！

完全的

恭喜！实施部分就到此结束了！

这次我们实现的增量搜索函数如下所示。
您觉得怎么样？

以前需要用 JavaScript 实现的功能，现在只需使用 Livewire 就能轻松实现。

这次我们实现了一个简单的搜索功能，目前仅支持按姓名和电子邮件地址搜索，但您也可以通过添加用户属性或缩小搜索范围来增强搜索功能。此外，监听搜索结果输出事件并运行不同的进程也很有意思！

概括

我认为 Livewire 的独特之处在于，它无需使用 JavaScript 即可轻松实现，采用与常规服务器端开发相同的技术。

唯一的缺点是它只能与 Laravel 框架一起使用。

不过，如果你正在使用 Laravel 进行开发，我认为值得一试！它是一个非常简单有趣的库。

祝您 Laravel 使用愉快！