Download the PHP package amabk/livewire-search-select without Composer
On this page you can find all versions of the php package amabk/livewire-search-select. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download amabk/livewire-search-select
More information about amabk/livewire-search-select
Files in amabk/livewire-search-select
Package livewire-search-select
Short Description Reusable Livewire searchable dropdown component.
License MIT
Informations about the package livewire-search-select
Livewire Search Select
A powerful and customizable Livewire component for searchable select dropdowns. Supports multi-field labels, concatenation, and emits Livewire events for reactive parent handling.
Usage
1. Installation
Install via Composer:
2. Basic Usage
Add the component to any Blade view:
Single-select
Multi-select (chips inside field)
Custom separators
Prop | Type | Default | Notes | |
---|---|---|---|---|
modelClass |
string |
— | Eloquent model FQCN, e.g. \App\Models\User |
|
labelFields |
array<string> | string |
['email'] |
Fields used to render the visible label | |
searchFields |
array<string> |
['name'] |
Fields used for LIKE search | |
concatFields |
bool |
false |
If true , search uses CONCAT_WS(searchSeparator, …) |
|
labelSeparator |
string |
' ' |
Separator when rendering labels (display only) | |
searchSeparator |
string |
' ' |
Separator used in CONCAT_WS when concatFields=true |
|
orderBy |
{field:string, direction:'asc' \| 'desc'} |
{ field: 'id', direction: 'asc' } |
Sort for initial and searched results | |
limit |
int |
10 |
Max rows for search results | |
initialLoad |
int |
0 |
Prefetch N items on focus when search is empty | |
placeholder |
string |
'Search...' |
Hidden when chips exist (multi) | |
emitEvent |
string \| null |
null |
Event name to dispatch on change | |
inputClass |
string |
'' |
Extra classes on the wrapper (the chip field) | |
optionClass |
string |
'' |
Extra classes on the dropdown <ul> |
|
multiple |
bool |
false |
Enable multi-select | |
selectedId |
int \| null |
null |
Preselect for single-select | |
selectedIds |
int[] |
[] |
Preselect for multi-select |
3. Listening for Selection Events
When a user selects an option, the component emits a Livewire event (named by your emit-event
prop) to the parent component.
You can listen for it and update your parent Livewire component’s data accordingly.
Example Parent Component:
In your Blade view:
4. Customizing Appearance
You can pass custom CSS classes to the input and the options list:
5. Setting a Default Selected Option
To set a default selection:
This will preselect the items with id = 5
and id = 9
and show their labels in the input.
6. Troubleshooting & Tips
- No results found: Ensure your model and label fields are correct and records exist.
- Alpine/Livewire conflicts: Alpine.js is auto-reinitialized after Livewire updates, but if you experience issues, check your Alpine.js version.
- Emitted event not caught?
Ensure your parent Livewire component is listening for the same event name as the
emit-event
you specify.
7. Development
- PSR-4 namespace: AMABK\LivewireSearchSelect\ → src/
- Component class: AMABK\LivewireSearchSelect\SearchSelect
- View: resources/views/search-select.blade.php (Loaded as view('livewire-search-select::search-select'))
8. Example: User Dropdown in a Form
10. Advanced: Use With Any Model & Any Label Format
For advanced use, extend the component in your own package. For issues, open a GitHub issue or PR!
License
MIT © AMABK