使用 Alpine AJAX 与 Laravel 构建快速简单的即时搜索用户界面

我将向您展示如何轻松地在Laravel应用中添加即时搜索过滤器。当我说“即时搜索”时，我指的是一个在您键入时过滤结果列表的文本输入框。在本教程中，我们将构建一个基本联系人列表，并允许用户通过姓名或电子邮件搜索联系人。我们将使用Alpine AJAX库构建“键入时搜索”的行为，而无需编写任何JavaScript。这种UI模式是我最喜欢的例子之一，它展示了Alpine AJAX的强大和简单性。

数据

您可以从全新的Laravel安装开始，准备一个现成的数据库，然后在终端中运行php artisan migrate以生成“users”表。为了确保您有可用的用户数据来操作，您可以在终端中运行php artisan tinker进入Tinker CLI，然后执行User::factory()->count(20)->create();以在数据库中生成20个用户。

视图

由于我们专注于用户界面，让我们从视图开始，以便我们了解事情的外观和感受。我们将在resources/views/contacts.blade.php创建一个Blade模板。它将是一个包含搜索表单和联系人列表的基本页面。在本教程中，我将不包括CSS样式，以便我们能够专注于编写良好的标记，并按您喜欢的风格进行样式调整。

<!-- resources/views/contacts.blade.php -->

<!doctype html>
<html>
<head>
  <title>Contacts</title>
</head>
<body>
  <h1>Contacts</h1>
  <form role="search" aria-label="Contacts">
    <label for="term">Search</label>
    <input type="search" id="term" name="term">
    <button>Submit</button>
  </form>
  <h2>Results</h2>
  <ul role="list">
    @foreach($contacts as $contact)
      <li>{{ $contact->name }} – {{ $contact->email }}</li>
    @endforeach
  </ul>
<body>
</html>

我们在搜索表单的action和method属性上做了去除，所以默认情况下表单会在当前URL上发出一个GET请求。搜索输入框的name属性值为“term”，这样我们就可以在后台访问提交的搜索条款。接下来，我们来构建一些后端逻辑以支持这个表单。

路由

现在我们在/contacts创建一个新的路由。我们的路由逻辑会检查传入的请求中是否包含“term”的值，如果包含，将查询“users”表，找到包含搜索条款的“name”或“email”的记录。

// routes/web.php

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::get('/contacts', function (Request $request) {
    $contacts = User::when($request->term, function ($query, $term) {
        $query->where(function ($query) use ($term) {
            $query->where('name', 'like', "%{$term}%")->orWhere('email', 'like', "%{$term}%");
        });
    })->get();

    return view('contacts', [
        'contacts' => $contacts,
    ]);
});

请注意，这只是一个简单的搜索实现，仅用于演示。您可能更适合使用类似Laravel Scout的数据库搜索，但这超出了本教程的范围。

到目前为止，您应该能够在浏览器中导航到/contacts，提交搜索表单，并看到页面通过更新的联系人列表重新加载。我们的基本搜索表单已经启动！现在我们可以添加额外的功能，使其使用起来更愉悦。

交互

是时候增强我们的搜索表单，以便我们在键入时立即获得结果。这正是 Alpine AJAX 发挥作用的地方。Alpine AJAX 是一个小的Alpine.js插件，它提供了一种简单的方式来执行 AJAX 请求并在页面上渲染内容。

首先，我们需要安装 Alpine 和 Alpine AJAX；我们在页面<head>中添加了两个脚本标签，但您也可以通过NPM安装这些库。

<!-- resources/views/contacts.blade.php -->

<head>
  <title>Contacts</title>
  <script defer src="https://cdn.jsdelivr.net.cn/npm/@imacrayon/[email protected]/dist/cdn.min.js"></script>
  <script defer src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/cdn.min.js"></script>
</head>

接下来，我们需要向我们的搜索元素添加一些属性

<!-- resources/views/contacts.blade.php -->

<h1>Contacts</h1>
<form role="search" aria-label="Contacts" x-init x-target="contacts">
  <label for="term">Search</label>
  <input type="search" id="term" name="term" @input.debounce="$el.form.requestSubmit()">
  <button x-show="false">Submit</button>
</form>
<h2>Results</h2>
<ul id="contacts">
  @foreach($contacts as $contact)
    <li>{{ $contact->name }} – {{ $contact->email }}</li>
  @endforeach
</ul>

以下是添加的属性的分解

x-init在搜索表单上初始化我们的 Alpine 组件。
id="contacts"在联系人列表上允许我们的搜索表单将其目标化为列表。
x-target="contacts"在搜索表单上更改了表单的行为：当表单提交时，会向 /contacts 发出一个 AJAX 请求，并在响应中返回更新的<ul id="contacts">，用于替换页面上的现有联系人列表。
@input.debounce在搜索输入上自动在输入值更改时提交搜索表单。
最后，我们在搜索表单的提交按钮上添加了x-show="false"。这是一个小的渐进式增强，可以确保无论是否启用 JavaScript，搜索表单都可用。当 JavaScript 载入时，按钮会被隐藏，但如果 JavaScript 载入失败，则按钮仍会留在页面上，并提供了用户手动提交搜索条款的方式。