Laravel实时搜索框搭建全指南

本教程将基于AJAX为Laravel构建一个实时搜索功能，当用户在搜索框中输入内容时，结果会立即显示，而无需刷新页面。步骤涉及连接数据库、模型、控制器、视图和路由等，即使是Laravel、PHP或数据库新手也能轻松操作。

本教程使用的是Windows系统、XAMPP（用于 Apache + MySQL）和用于运行Laravel命令的CMD（命令提示符）。这些选择仅用于演示。使用Windows + XAMPP是因为这是一个常见的配置，许多人都可以在自己的机器上尝试。如果使用的是Mac或Linux 系统，路径和命令可能略有不同，但步骤相同。

以下是本教程中将要构建的内容：

一个包含一些演示数据的 MySQL 产品表；
一个带有搜索框的 Laravel 页面；
当用户在搜索框中输入内容时，匹配的产品会立即显示在下方，无需重新加载页面。

一、前提条件

在开始编写代码之前，请确保已安装以下软件：

1、PHP 8.x 或更高版本 – Laravel 需要 PHP 才能运行。

2、Composer – Laravel 的依赖管理器。

3、Laravel 12.x – 本教程将使用的版本。

4、MySQL（通过 XAMPP）– 用于存储产品数据。

5、代码编辑器 – VS Code 或喜欢的任何编辑器。

6、CMD（或 PowerShell）– 将在此处运行所有 Laravel 命令。

二、设置数据库

首先，准备用于存储产品数据的数据库：

打开 XAMPP 并启动 Apache 和 MySQL。

打开 phpMyAdmin（http://localhost/phpmyadmin）。

创建一个名为 live_search_db 的新数据库

对于现代 Web 开发，最佳实践是使用 UTF-8 排序规则，例如 utf8mb4_general_ci。

点击“创建”按钮。

这将创建一个数据库来存储我们的产品记录。可以随意命名，只需记住这个名称，因为我们稍后会在 .env 文件中使用它。

三、创建新的Laravel项目

现在将使用 Composer 创建一个新的 Laravel 项目：

打开 CMD 并导航到 XAMPP 项目文件夹。例如：

cd C:\xampp\htdocs

运行以下命令创建一个名为 live-search 的新 Laravel 项目：

composer create-project laravel/laravel live-search

完成后，导航到项目文件夹：

cd live-search

此时已经拥有一个空白的 Laravel 项目。可以将其视为画布——现在我们将在此基础上构建实时搜索功能。

四、配置数据库

现在数据库已准备就绪，需要将 Laravel 项目连接到它。通过编辑位于项目根文件夹中的 .env 文件来完成此操作。该文件包含应用程序的所有必要配置设置。

打开 .env 文件并查找数据库部分。我的 .env 文件位于以下路径：C:\xampp\htdocs\live-search。

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=live_search_db

DB_USERNAME=root

DB_PASSWORD=

需要使用以下信息更新它：

DB_CONNECTION=mysql — 这告诉 Laravel 我们正在使用 MySQL 数据库；
DB_HOST=127.0.0.1 — 这是 XAMPP 服务器运行的本地地址；
DB_PORT=3306 — 这是 MySQL 的默认端口；
DB_DATABASE=live_search_db — 这是我们刚刚创建的数据库的名称；
DB_USERNAME=root — 这是 XAMPP 中 MySQL 的默认用户名；
DB_PASSWORD= — root 用户的默认密码为空，因此我们将其留空。

保存这些更改后，Laravel 将准确地知道在哪里存储和获取所有产品数据。下一步是在新数据库中创建实际的 products 表。

现在 Laravel 知道在哪里存储和获取我们的产品。下一步是创建 products 表。

五、创建Products表

现在项目已连接到数据库，需要创建一个表来存储我们的产品。在 Laravel 中使用迁移来完成此操作，它就像数据库模式的版本控制系统。

首先，返回到命令提示符或终端并运行以下命令。这将为我们的产品表生成一个新的迁移文件。

php artisan make:migration create_products_table

接下来，打开位于 database/migrations/ 文件夹中的新文件。

将 up()函数替换为：

public function up()

{
Schema::create(‘products’, function (Blueprint $table) {

$table->id();

$table->string(‘title’);

$table->string(‘description’);

$table->decimal(‘price’, 10, 2);

$table->timestamps();

});

}

将替换此函数中的现有代码，以指定产品所需的列：

$table->id()：将为我们的表创建一个自增主键，用于唯一标识每个产品；
$table->string(‘title’)：将添加一个用于产品标题的列；
$table->string(‘description’)：将添加一个用于产品描述的列；
$table->decimal(‘price’, 10, 2)：创建一个列来存储价格，并精确到小数位数；
$table->timestamps()：将添加两个列：created_at 和 updated_at，Laravel 会自动管理它们。

替换 up() 函数中的代码后，保存文件。现在我们可以运行迁移，将这些更改应用到数据库并创建表。

php artisan migrate

运行此命令后，Laravel 将执行 up() 函数中的代码，并在 live_search_db 数据库中创建 products 表。

可以通过检查 phpMyAdmin 来确认，将在其中看到包含我们刚刚定义的所有列的新表。

六、使用虚拟数据填充表

现在我们的表已经准备就绪，我们需要向其中添加一些产品，以便进行搜索。在 Laravel 中，最好的方法是使用 Seeder 文件。Seeder 文件可以让你轻松地使用虚拟或测试数据填充数据库。

首先，让我们通过在终端中运行以下命令来创建一个新的 Seeder 文件：

php artisan make:seeder ProductSeeder

这将在 database/seeders/ProductSeeder.php 创建一个新文件。打开此文件，并将现有的 run() 函数替换为以下代码。此代码会将五种不同的产品（例如 T 恤、牛仔裤和笔记本电脑）插入到我们的新表中。

use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;
class ProductSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
DB::table(‘products’)->insert([
[
‘title’ => ‘T-shirt’,
‘description’ => ‘A comfortable cotton t-shirt.’,
‘price’ => 15.00,
],
[
‘title’ => ‘Jeans’,
‘description’ => ‘Classic blue denim jeans.’,
‘price’ => 45.50,
],
[
‘title’ => ‘Laptop’,
‘description’ => ‘Powerful laptop for all your needs.’,
‘price’ => 1200.00,
],
[
‘title’ => ‘Keyboard’,
‘description’ => ‘Mechanical keyboard with RGB lighting.’,
‘price’ => 75.25,
],
[
‘title’ => ‘Mouse’,
‘description’ => ‘Ergonomic wireless mouse.’,
‘price’ => 30.00,
]
]);
}
}

保存文件后，需要告诉 Laravel 运行这个数据填充器。打开主 DatabaseSeeder.php 文件（也在 database/seeders 文件夹中），并在 run() 函数中添加以下代码：

$this->call(ProductSeeder::class);

最后，返回终端并运行主数据填充命令。这将执行我们的 ProductSeeder 并将虚拟数据填充到 products 表中。

php artisan db:seed

现在可以在 phpMyAdmin 中查看 products 表，了解所有新条目。

七、创建控制器

现在我们的数据库已经有一些虚拟数据，我们需要创建一个控制器来管理搜索页面的逻辑。可以将控制器视为应用程序的“中间人”。它接收来自网站的请求，确定如何处理，并返回响应。

在本例中，我们希望控制器处理两件事：显示搜索页面和处理搜索查询。我们将在控制器中设置两个独立的函数来管理这些任务。

要创建控制器，只需在终端中运行以下命令：

php artisan make:controller SearchController

这将在 app/Http/Controllers/SearchController.php 目录下自动创建一个新文件。现在，打开该文件并将其内容替换为以下代码。

代码包含两个主要部分：

index()：此函数很简单。它的唯一作用是向用户显示搜索页面；
search()：此函数处理实时搜索请求。它接收用户输入的内容，在数据库中搜索匹配的产品，然后将结果返回到页面。它还包含输入验证，以确保安全性。

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;
class SearchController extends Controller
{
public function index()
{
// This will show the search page
return view(‘search.search’);
}
public function search(Request $request)
{
$request->validate([
‘search’ => ‘nullable|string|max:255’
]);
if($request->ajax()) {
$products = Product::where(‘title’, ‘like’, ‘%’ . $request->search . ‘%’)->get();
$output = ”;
if($products->count() > 0) {
foreach($products as $product) {
$output .= ‘<tr>’.
‘<td>’.$product->id.'</td>’.
‘<td>’.$product->title.'</td>’.
‘<td>’.$product->description.'</td>’.
‘<td>’.$product->price.'</td>’.
‘</tr>’;
}
} else {
$output .= ‘<tr><td colspan=”4″>No results found</td></tr>’;
}
return response($output);
}
}
}

八、创建视图

现在控制器已经准备就绪，是时候构建用户界面了。这是用户实际看到并与之交互的内容。在 Laravel 中，前端是使用视图构建的。

首先，在 resources/views/ 目录下创建一个名为 search 的新文件夹。然后，我
在新创建的文件夹内，创建一个名为 search.blade.php 的文件。

接下来，将以下代码添加到新的 search.blade.php 文件中。

<!DOCTYPE html>
<html>
<head>
<meta name=”_token” content=”{{ csrf_token() }}”>
<title>Live Search</title>
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
</head>
<body>
<div class=”container mt-5″>
<h3>Products Info</h3>
<input type=”text” class=”form-control” id=”search” placeholder=”Search products…”>
<table class=”table table-bordered table-hover mt-3″>
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script>
$.ajaxSetup({
headers: {
‘X-CSRF-TOKEN’: $(‘meta[name=”_token”]’).attr(‘content’)
}
});
$(‘#search’).on(‘keyup’, function(){
let query = $(this).val();
$.ajax({
type: ‘GET’,
url: ‘{{ url(“search”) }}’,
data: {search: query},
success: function(data){
$(‘tbody’).html(data);
}
});
});
</script>
</body>
</html>

这段代码包含了我们搜索页面的 HTML 结构以及一些用于处理实时搜索功能的 JavaScript 代码。

以下是代码功能的简要概述：

HTML 代码创建了一个简单的页面，包含搜索栏和用于显示搜索结果的表格；
meta name=”_token” 对于安全性至关重要。它有助于保护应用程序免受跨站请求伪造 (CSRF) 攻击；
JavaScript 代码使用 jQuery 监听用户在搜索栏中输入的内容。每次按下按键时，它都会向 SearchController 发送一个 AJAX 请求，然后 SearchController 返回匹配的产品。

九、设置路由

这是我们设置的最后一步。我们需要创建路由来告诉 Laravel 如何将 URL 连接到我们新的 SearchController。路由就像应用程序的地图，引导用户浏览器的请求到达正确的控制器函数。

打开 routes/web.php 文件并添加以下代码：

use App\Http\Controllers\SearchController;

Route::get(‘/’, [SearchController::class, ‘index’]);

Route::get(‘/search’, [SearchController::class, ‘search’]);

这两行代码的作用如下：

Route::get(‘/’, …): 这会将应用程序的主页 (/) 连接到 SearchController 中的 index() 函数。这样，当用户访问主 URL 时，他们就会看到刚刚创建的搜索页面；
Route::get(‘/search’, …): 此路由用于实时搜索功能。它将 /search URL 连接到控制器中的 search() 函数。搜索页面上的 JavaScript 会将所有请求发送到此路由。