包简介

A Statamic Live Search realized with Laravel Livewire.

README 文档

README

Statamic Live Search

A Statamic Live Search realised with Laravel Livewire.

It's fast to implement, hooks into the Statamic 3 core search and updates search results as you type.

This Package extends my third-party Statamic 3 Livewire integration.

No need for live search?

Check out my Statamic 3 Livewire integration.

Upgrading

Check out the upgrade guide: Upgrade Guide

Installation

Pull in the package with composer

composer require marcorieser/statamic-live-search

Requirements

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

Set up Livewire

The option to create your first search provides a quick-start example to get you going.

As the statamic-live-search extends the statamic-livewire addon, the setup is exactly the same and a deeper understanding might be useful. See the link below for more information.

Statamic 3 Livewire integration Docs

Create your first search

Add the livewire:search component to one of your templates and define your template.

<!-- 
### 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>

Setup the template

Use the default dropdown layout

To get you started as fast as possible, we provide a default template. You can publish it and edit it according to your needs.

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

After publishing, you will find the template inside resources/views/vendor/live-search/dropdown.blade.php. It can be edited as you like.

Use your own template

Create your own template and put it anywhere you like. Define the template in the tag and you are ready to go.

If you need augmented values - as in the case of images - it's easiest to use Antlers, so you don't need to worry about it.

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

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

If the template name is partials.search, the template is expected at resources\views\partials\search.blade.php or resources\views\partials\search.antlers.html.

This might be a solid starting point for your own template:

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>

Configure your index

This is the best bit. This addon hooks into Statamic core search. Just configure your indexes in the config/statamic/search.php file.

If you don't provide an index we will search everything. That's great for smaller sites.

A more specific search could look something like this:

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

Remember to define the index in your component:

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

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

To update your indexes run php please search:update More information

See the Statamic docs for more information

Customize the search logic

The parts we have provided have been built in a modular fashion so you can easily extend them if you wish.

Extend the Search Class

1. Create your own Livewire Controller

php artisan make:livewire YourCustomLivewireController

2. Extend the Search class

namespace App\Your\Namespace;

use MarcoRieser\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. Use the SearchFacade Controller

It might be that you want to customize the name of the query string or that you want to use multiple filters.

You can import the SearchFacade trait and write a complete Livewire Controller as you need it.

use MarcoRieser\LiveSearch\Traits\SearchFacade;

The method we have provided expects the following parameters: search($query, ?string $index = null, ?int $limit = 10)

Have fun customizing.

Upgrade guide

Version 1 to 2

Livewire will be updated to Version 3 under the hood. A full Livewire upgrade guide can be found here: https://livewire.laravel.com/docs/upgrading

Breaking change

Use wire:model.live in your template, instead of wire:model

In Livewire 3, wire:model is "deferred" by default (instead of by wire:model.defer). To achieve the same behavior as wire:model from Livewire 2, you must use wire:model.live.

https://livewire.laravel.com/docs/upgrading#wiremodel

Credits

Thanks to:

Caleb and the community for building Livewire
Austenc for the marketplace preview image

Support

I love to share with the community. Nevertheless, it does take a lot of work, time and effort.

Sponsor me on GitHub to support my work and this addon.

License

This plugin is published under the MIT license. Feel free to use it and remember to spread the love.

jonassiewertsen/statamic-live-search 适用场景与选型建议

jonassiewertsen/statamic-live-search 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 27.33k 次下载、GitHub Stars 达 22，最近一次更新时间为 2021 年 01 月 31 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「plugin」「search」「addon」「live」「statamic」「livewire」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 jonassiewertsen/statamic-live-search 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 jonassiewertsen/statamic-live-search 我们能提供哪些服务？

定制开发 / 二次开发

基于 jonassiewertsen/statamic-live-search 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 jonassiewertsen/statamic-live-search 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

maiconpinto/cakephp-adminlte-theme 171

CakePHP 4.x AdminLTE Theme.

schulzefelix/laravel-search-console 50

A Laravel package to retrieve data from Google Search Console

id/indexed-search-autocomplete 5

Indexed Search Autocomplete - Extends the TYPO3 Core Extension Indexed_Search searchform with an autocomplete feature.

stinger-soft/entity-search-bundle 0

Abstraction Layer to index and search entities

piotrpress/composer-gravityforms 2

This composer plugin enables installation of GravityForms WordPress plugin and its addons.

pringuin/pimcore-lucene-search 5

Pimcore 10.x Website Indexer (powered by Zend Search Lucene)

jonassiewertsen/statamic-live-search

包简介

关键字：