{"id":26630794,"url":"https://github.com/marcorieser/statamic-live-search","last_synced_at":"2025-10-28T16:04:16.018Z","repository":{"id":37410475,"uuid":"333977495","full_name":"marcorieser/statamic-live-search","owner":"marcorieser","description":"A Statamic Live Search realized with Laravel Livewire.","archived":false,"fork":false,"pushed_at":"2025-03-24T10:56:06.000Z","size":301,"stargazers_count":20,"open_issues_count":2,"forks_count":14,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-02T06:08:41.993Z","etag":null,"topics":["laravel-livewire","statamic","statamic-addon"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marcorieser.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["marcorieser"]}},"created_at":"2021-01-28T22:53:47.000Z","updated_at":"2025-03-24T10:50:22.000Z","dependencies_parsed_at":"2025-03-24T11:07:47.928Z","dependency_job_id":"aabd69de-5030-4734-9fae-46c662854c65","html_url":"https://github.com/marcorieser/statamic-live-search","commit_stats":{"total_commits":60,"total_committers":13,"mean_commits":4.615384615384615,"dds":0.5666666666666667,"last_synced_commit":"e82a07a0a4f65ab17901209dcbdf3ed1e863a1f2"},"previous_names":["marcorieser/statamic-live-search"],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcorieser%2Fstatamic-live-search","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcorieser%2Fstatamic-live-search/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcorieser%2Fstatamic-live-search/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcorieser%2Fstatamic-live-search/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcorieser","download_url":"https://codeload.github.com/marcorieser/statamic-live-search/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247994119,"owners_count":21030050,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["laravel-livewire","statamic","statamic-addon"],"created_at":"2025-03-24T14:21:03.712Z","updated_at":"2025-10-28T16:04:16.007Z","avatar_url":"https://github.com/marcorieser.png","language":"PHP","funding_links":["https://github.com/sponsors/marcorieser","https://github.com/sponsors/marcorieser/"],"categories":[],"sub_categories":[],"readme":"\u003c!-- statamic:hide --\u003e\n# Statamic Live Search\n![Statamic 3.0+](https://img.shields.io/badge/Statamic-3.0+-FF269E?style=for-the-badge\u0026link=https://statamic.com)\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/marcorieser/statamic-live-search.svg?style=for-the-badge)](https://packagist.org/packages/marcorieser/statamic-live-search)\n\u003c!-- /statamic:hide --\u003e\n\n\u003e A Statamic Live Search realised with [Laravel Livewire](https://laravel-livewire.com/).\n\nIt's fast to implement, hooks into the Statamic 3 core search and updates search results as you type. \n\n\u003cimg src=\"https://github.com/marcorieser/statamic-live-search/blob/main/statamic-live-serach.gif?raw=true\" alt=\"Statamic Live Search\"\u003e\n\nThis Package extends my third-party [Statamic 3 Livewire integration](https://github.com/marcorieser/statamic-livewire).\n\n## No need for live search?\n\nCheck out my [Statamic 3 Livewire integration](https://github.com/marcorieser/statamic-livewire).\n\n## Upgrading\n\nCheck out the upgrade guide: [Upgrade Guide](#upgrade-guide)\n\n## Installation\nPull in the package with composer\n```bash\ncomposer require marcorieser/statamic-live-search\n```\n\n## Requirements\n- PHP \u003e= 8.1\n- Laravel 10 | 11 | 12\n- Statamic 4 | 5\n\n## Set up Livewire\nThe option to create your first search provides a quick-start example to get you going.\n\nAs 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.\n\n[Statamic 3 Livewire integration Docs](https://github.com/marcorieser/statamic-livewire#general-documentation)\n\n## Create your first search\n\nAdd the `livewire:search` component to one of your templates and define your template.\n\n```html\n\u003c!-- \n### If using Antlers ###\n--\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    ...\n    {{ livewire:styles }}\n\u003c/head\u003e\n\u003cbody\u003e\n    {{ livewire:search }}\n   \n    \u003c!-- Your stuff goes here --\u003e\n\n    ...\n    {{ livewire:scripts }}\n\u003c/body\u003e\n\u003c/html\u003e\n\n\u003c!-- \n### If using Blade ###\n--\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    ...\n    @livewireStyles\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003clivewire:search /\u003e\n    \n    \u003c!-- Your stuff goes here --\u003e\n\n    ...\n    @livewireScripts\n\u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n## Setup the template\n\n### Use the default dropdown layout\n\nTo get you started as fast as possible, we provide a default template. You can publish it and edit it according to your needs. \n\n```bash\nphp artisan vendor:publish --tag=live-search:views\n```\n\nAfter publishing, you will find the template inside `resources/views/vendor/live-search/dropdown.blade.php`. It can be edited as you like.\n\n### Use your own template\n\nCreate your own template and put it anywhere you like. Define the template in the tag and you are ready to go.\n\nIf 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.\n\n\n```html\n\u003c!-- If using Antlers --\u003e\n{{ livewire:search template='partials.your-own-search-template' }}\n\n\u003c!-- If using Blade --\u003e\n\u003clivewire:search :template='partials.your-own-search-template' /\u003e\n```\n\nIf the template name is `partials.search`, the template is expected at `resources\\views\\partials\\search.blade.php` or `resources\\views\\partials\\search.antlers.html`.\n\nThis might be a solid starting point for your own template:\n\n#### Blade\n\n```html\n\u003cdiv\u003e\n    \u003cinput wire:model.live=\"q\" type=\"search\"\u003e\n\n    \u003cul\u003e\n        @forelse($results as $result)\n            \u003cli\u003e{{ $result['title'] }}\u003c/li\u003e\n        @empty\n            No matches found\n        @endforelse\n    \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n#### Antlers\n```html\n\u003cdiv\u003e\n    \u003cinput wire:model.live=\"q\" type=\"search\"\u003e\n\n    \u003cul\u003e\n        {{ results }}\n            \u003cli\u003e{{ title }}\u003c/li\u003e\n        {{ /results }}\n    \u003c/ul\u003e\n\u003c/div\u003e\n```\n\n## Configure your index\n\nThis is the best bit. This addon hooks into Statamic core search. Just configure your indexes in the `config/statamic/search.php` file. \n\nIf you don't provide an index we will search everything. That's great for smaller sites. \n\nA more specific search could look something like this:\n\n```php\n'blog' =\u003e [\n     'driver' =\u003e 'local',\n     'searchables' =\u003e 'collection:blog',\n     'fields' =\u003e ['title'],\n ],\n```\n\nRemember to define the index in your component:\n\n```html\n\u003c!-- If using Antlers --\u003e\n{{ livewire:search template='partials.search' index='blog' }}\n\n\u003c!-- If using Blade --\u003e\n\u003clivewire:search :template='partials.search' :index='blog' /\u003e\n```\n\nTo update your indexes run `php please search:update` [More information](https://statamic.dev/search#updating-indexes)\n\n[See the Statamic docs for more information](https://statamic.dev/search#searchables)\n\n\n## Customize the search logic\n\nThe parts we have provided have been built in a modular fashion so you can easily extend them if you wish. \n\n### Extend the Search Class\n\n#### 1. Create your own Livewire Controller\n`php artisan make:livewire YourCustomLivewireController`\n\n#### 2. Extend the Search class\n```php\nnamespace App\\Your\\Namespace;\n\nuse MarcoRieser\\LiveSearch\\Http\\Livewire\\Search;\n\nclass YourCustomLivewireController extends Search\n{\n    public $template;\n    public $index;\n\n    public function mount(string $template, string $index = null)\n    {\n        // You can pass these as parameters or they can be hardcoded. \n        $this-\u003etemplate = $template;\n        $this-\u003eindex = $index;\n    }\n\n    public function render()\n    {\n        // Do your stuff here. \n    \n        return view($this-\u003etemplate, [\n            'results' =\u003e $this-\u003esearch($this-\u003eq, $this-\u003eindex),\n        ]);\n    }\n}\n```\n\n#### 2. Use the SearchFacade Controller\n\nIt might be that you want to customize the name of the query string or that you want to use multiple filters. \n\nYou can import the SearchFacade trait and write a complete Livewire Controller as you need it. \n\n`use MarcoRieser\\LiveSearch\\Traits\\SearchFacade;`\n\nThe method we have provided expects the following parameters:\n`search($query, ?string $index = null, ?int $limit = 10)`\n\nHave fun customizing. \n\n## Upgrade guide\n\n### Version 1 to 2\n\nLivewire will be updated to Version 3 under the hood. A full Livewire upgrade guide can be found here: https://livewire.laravel.com/docs/upgrading\n\n**Breaking change**\n\nUse `wire:model.live` in your template, instead of `wire:model`\n\n\u003e 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.\n\nhttps://livewire.laravel.com/docs/upgrading#wiremodel\n\n\n## Credits\n\nThanks to:\n- [Caleb](https://github.com/calebporzio) and the community for building [Livewire](https://laravel-livewire.com/)\n- [Austenc](https://github.com/austenc) for the marketplace preview image\n\n## Support\nI love to share with the community. Nevertheless, it does take a lot of work, time and effort. \n\n[Sponsor me on GitHub](https://github.com/sponsors/marcorieser/) to support my work and this addon.\n\n## License \nThis plugin is published under the MIT license. Feel free to use it and remember to spread the love.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcorieser%2Fstatamic-live-search","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcorieser%2Fstatamic-live-search","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcorieser%2Fstatamic-live-search/lists"}