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.
Check out my Statamic 3 Livewire integration.
Check out the upgrade guide: Upgrade Guide
Pull in the package with composer
composer require jonassiewertsen/statamic-live-search- PHP >= 8.1
- Laravel 10 | 11
- Statamic 4 | 5
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
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>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:viewsAfter publishing, you will find the template inside resources/views/vendor/live-search/dropdown.blade.php. It can be edited as you like.
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.php.
This might be a solid starting point for your own template:
<div>
<input wire:model.live="q" type="search">
<ul>
@forelse($results as $result)
<li>{{ $result['title'] }}</li>
@empty
No matches found
@endforelse
</ul>
</div><div>
<input wire:model.live="q" type="search">
<ul>
{{ results }}
<li>{{ title }}</li>
{{ /results }}
</ul>
</div>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
The parts we have provided have been built in a modular fashion so you can easily extend them if you wish.
php artisan make:livewire YourCustomLivewireController
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),
]);
}
}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 Jonassiewertsen\LiveSearch\Traits\SearchFacade;
The method we have provided expects the following parameters:
search($query, ?string $index = null, ?int $limit = 10)
Have fun customizing.
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
Thanks to:
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.
This plugin is published under the MIT license. Feel free to use it and remember to spread the love.