README

Statamic Live Search

使用 Laravel Livewire 实现的 Statamic Live Search。

快速实现，集成到 Statamic 3 核心搜索，并在您输入时更新搜索结果。

此包扩展了我的第三方 Statamic 3 Livewire 集成。

不需要实时搜索？

查看我的 Statamic 3 Livewire 集成。

升级

查看升级指南：升级指南

安装

使用 composer 拉取此包

composer require jonassiewertsen/statamic-live-search

要求

PHP >= 8.1
Laravel 10 | 11
Statamic 4 | 5

设置 Livewire

创建第一个搜索选项提供了一个快速入门示例，帮助您开始。

由于 statamic-live-search 扩展了 statamic-livewire 插件，设置完全相同，更深入的了解可能有用。更多信息请参阅以下链接。

Statamic 3 Livewire 集成文档

创建您的第一个搜索

将 livewire:search 组件添加到您的模板之一，并定义模板。

<!-- 
### If using Antlers ###
-->
<html>
<head>
    ...
    {{ livewire:styles }}
</head>
<body>
    {{ livewire:search }}
   
    <!-- Your stuff goes here -->

    ...
    {{ livewire:scripts }}
</body>
</html>

<!-- 
### If using Blade ###
-->
<html>
<head>
    ...
    @livewireStyles
</head>
<body>
    <livewire:search />
    
    <!-- Your stuff goes here -->

    ...
    @livewireScripts
</body>
</html>

设置模板

使用默认下拉布局

为了尽快帮助您开始，我们提供默认模板。您可以发布并根据自己的需求进行编辑。

php artisan vendor:publish --tag=live-search:views

发布后，您将在 resources/views/vendor/live-search/dropdown.blade.php 中找到模板。您可以像喜欢的那样进行编辑。

使用您自己的模板

创建自己的模板并放置在您喜欢的地方。在标签中定义模板，您就可以开始了。

如果您需要增强值 - 例如图像 - 使用 Antlers 是最简单的，这样您就不必担心它。

<!-- If using Antlers -->
{{ livewire:search template='partials.your-own-search-template' }}

<!-- If using Blade -->
<livewire:search :template='partials.your-own-search-template' />

如果模板名称是 partials.search，则模板应位于 resources\views\partials\search.blade.php 或 resources\views\partials\search.antlers.php。

这可能是您自己模板的一个很好的起点

Blade

<div>
    <input wire:model.live="q" type="search">

    <ul>
        @forelse($results as $result)
            <li>{{ $result['title'] }}</li>
        @empty
            No matches found
        @endforelse
    </ul>
</div>

Antlers

<div>
    <input wire:model.live="q" type="search">

    <ul>
        {{ results }}
            <li>{{ title }}</li>
        {{ /results }}
    </ul>
</div>

配置您的索引

这是最好的部分。此插件集成到 Statamic 核心搜索。只需在 config/statamic/search.php 文件中配置您的索引。

如果您不提供索引，我们将搜索所有内容。这对于小型站点来说很棒。

更具体的搜索可能看起来像这样

'blog' => [
     'driver' => 'local',
     'searchables' => 'collection:blog',
     'fields' => ['title'],
 ],

请记住在组件中定义索引

<!-- If using Antlers -->
{{ livewire:search template='partials.search' index='blog' }}

<!-- If using Blade -->
<livewire:search :template='partials.search' :index='blog' />

要更新您的索引，请运行 php please search:update 更多信息

请参阅 Statamic 文档以获取更多信息

自定义搜索逻辑

我们提供的部分是以模块化的方式构建的，因此如果您愿意，可以轻松扩展它们。

扩展搜索类

1. 创建您自己的 Livewire 控制器

php artisan make:livewire YourCustomLivewireController

2. 扩展搜索类

namespace App\Your\Namespace;

use Jonassiewertsen\LiveSearch\Http\Livewire\Search;

class YourCustomLivewireController extends Search
{
    public $template;
    public $index;

    public function mount(string $template, string $index = null)
    {
        // You can pass these as parameters or they can be hardcoded. 
        $this->template = $template;
        $this->index = $index;
    }

    public function render()
    {
        // Do your stuff here. 
    
        return view($this->template, [
            'results' => $this->search($this->q, $this->index),
        ]);
    }
}

2. 使用搜索外观控制器

可能您想要自定义查询字符串的名称，或者您想要使用多个过滤器。

您可以将 SearchFacade 特性导入，并按照需要编写完整的 Livewire 控制器。

use Jonassiewertsen\LiveSearch\Traits\SearchFacade;

我们提供的该方法期望以下参数：search($query, ?string $index = null, ?int $limit = 10)

祝您自定义愉快。

升级指南

版本 1 到 2

在底层，Livewire 将更新到版本 3。完整的 Livewire 升级指南可以在此找到：https://livewire.laravel.net.cn/docs/upgrading

重大变更

在您的模板中使用 wire:model.live，而不是 wire:model

在 Livewire 3 中，wire:model 默认是“延迟的”（而不是 wire:model.defer）。为了实现与 Livewire 2 中 wire:model 相同的行为，您必须使用 wire:model.live。

https://livewire.laravel.net.cn/docs/upgrading#wiremodel

致谢

感谢

Caleb 和社区构建 Livewire
Austenc 提供了市场预览图像

支持

我乐于与社区分享。然而，这需要大量的工作、时间和精力。

在 GitHub 上赞助我以支持我的工作和此插件。

许可证

此插件在 MIT 许可证下发布。请随意使用它，并请记住传播爱心。

jonassiewertsen / statamic-live-search

维护者

详细信息