Download the PHP package ajjitech/searchable-select without Composer
On this page you can find all versions of the php package ajjitech/searchable-select. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download ajjitech/searchable-select
More information about ajjitech/searchable-select
Files in ajjitech/searchable-select
Package searchable-select
Short Description A powerful, Bootstrap 5 searchable dropdown component for Laravel Livewire 3 & 4 applications. Built with Alpine.js — no jQuery, no extra JS dependencies.
License MIT
Homepage https://github.com/ajjitech/searchable-select
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package searchable-select
Livewire Searchable Select
A powerful, feature-rich searchable dropdown component for Laravel Livewire 3 & 4 applications. Styled with Bootstrap 5 and powered by Alpine.js (bundled with Livewire) — no jQuery, no extra JavaScript dependencies.
Table of Contents
- Features
- Requirements
- Installation
- Bootstrap Setup
- Quick Start
- Component Props Reference
- Usage Examples
- Basic Single Select
- Multi-Select
- Dependent/Cascading Dropdowns
- Grouped Options
- Custom Keys
- Bootstrap Modal
- With Validation
- Disabled State
- Without Clear Button
- Advanced Features
- Customization Guide
- Dark Mode
- Troubleshooting
- Performance Optimization
- Testing
- Demo Application
- Contributing
- Credits
- License
Features
- Real-time search — client-side filtering as you type
- Multi-select support — select multiple options with visual badge tags
- Grouped options — organize options into labeled categories
- Clear button — one-click to clear all selections
- Dark mode support — automatic via Bootstrap 5.3 CSS variables (
data-bs-theme="dark") - Accessible — full keyboard navigation and ARIA attributes
- Livewire 3 & 4 compatible — works seamlessly with both versions
- Responsive — mobile-friendly and touch-optimized
- Disabled state — conditional disabling support
- Flexible data — works with Eloquent models, arrays, collections
- Dependent dropdowns — perfect for cascading country → region → city selects
- Bootstrap-native — uses Bootstrap CSS variables, no extra CSS framework required
- Zero extra JS — Alpine.js is bundled with Livewire; no jQuery, no CDN scripts
Requirements
- PHP: 8.2 or higher
- Laravel: 11.x, 12.x, or 13.x
- Livewire: 3.x or 4.x
- Bootstrap: 5.3+
- Alpine.js: bundled with Livewire (no separate install needed)
Installation
Install the package via Composer:
The package automatically registers its service provider. You can start using it immediately.
To customize the component HTML, publish the view:
This copies the view to resources/views/vendor/searchable-select/searchable-select.blade.php.
Bootstrap Setup
The component is styled entirely with Bootstrap 5.3 CSS variables and scoped .ss-* custom classes embedded in the view. You do not need to configure any content scanning or build step for the component styles — they are injected inline via @once automatically.
You simply need Bootstrap 5.3+ loaded in your application.
Option A — npm (recommended)
Import in your resources/js/app.js:
Or in your resources/css/app.css:
Option B — CDN
Add Bootstrap's CSS to your layout <head>:
Note: Bootstrap JS (
bootstrap.bundle.min.js) is not required. The component manages all its own interactivity through Alpine.js.
Quick Start
Basic Usage
Step 1: Create a Livewire component
Step 2: Set up the component class
Step 3: Use the component in your Blade view
That's it. The component syncs with your Livewire property via wire:model automatically.
Component Props Reference
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
options |
Array/Collection | [] |
Yes | Options data source |
placeholder |
String | 'Select option' |
No | Text shown when nothing is selected |
searchPlaceholder |
String | 'Search...' |
No | Placeholder for the search input |
emptyMessage |
String | 'No options available' |
No | Message shown when the list is empty |
optionValue |
String | 'id' |
No | Key to use as the option value |
optionLabel |
String | 'name' |
No | Key to use as the display label |
multiple |
Boolean | false |
No | Enable multi-select mode |
clearable |
Boolean | true |
No | Show/hide the × clear button |
disabled |
Boolean | false |
No | Disable the dropdown |
grouped |
Boolean | false |
No | Enable grouped options mode |
groupLabel |
String | 'label' |
No | Key for group label (when grouped is true) |
groupOptions |
String | 'options' |
No | Key for group items array (when grouped is true) |
teleport |
Boolean | true |
No | Teleport the dropdown panel to <body> to avoid clipping by parent containers. Set to false inside Bootstrap modals. |
wire:modelis a standard Livewire directive. Pass it aswire:model="propertyName"and the component handles two-way binding automatically.
Usage Examples
Basic Single Select
Multi-Select
Select multiple options displayed as removable badge tags:
Selected items appear as Bootstrap-styled badge tags with × remove buttons.
Dependent/Cascading Dropdowns
Grouped Options
Custom group keys:
Custom Keys
Bootstrap Modal
When using the component inside a Bootstrap modal, disable teleporting so the dropdown stays inside the modal's DOM and follows Bootstrap's focus and stacking context correctly.
With Validation
Real-time validation:
Disabled State
Without Clear Button
Using Arrays Instead of Models
Advanced Features
Adding Extra CSS Classes
Extra attributes (including class) are forwarded to the trigger element:
Creating Specialized Components
resources/views/components/country-select.blade.php:
Usage:
Server-Side Search (Large Datasets)
For thousands of records, implement server-side search in Livewire:
Customization Guide
Publishing Views
Your copy lands in resources/views/vendor/searchable-select/searchable-select.blade.php. Laravel uses your copy instead of the package default.
All component styles are scoped under .ss-* CSS classes defined in the @once style block at the top of the view. You can override any of them after publishing.
Overriding Individual Styles
After publishing the view, you can add custom CSS in your app.css:
Dark Mode
Dark mode works automatically via Bootstrap 5.3's CSS variable system. Add data-bs-theme="dark" to your <html> element:
Bootstrap's CSS variables (--bs-body-bg, --bs-body-color, --bs-border-color, --bs-primary-bg-subtle, etc.) adjust automatically, and the component adapts with them. No additional configuration needed.
Troubleshooting
Dropdown doesn't open / Click doesn't work
-
Verify Alpine.js is loaded (it comes bundled with Livewire 3+):
-
Ensure you are not loading Alpine.js separately when using Livewire 3+:
- Check the browser console for JavaScript errors (F12 → Console).
Component appears unstyled
- Ensure Bootstrap 5.3+ CSS is loaded before your page content renders.
- Verify Bootstrap's
dist/css/bootstrap.min.cssis included, not just Bootstrap JS. - Clear the Laravel view cache:
Options not updating / Stale data
Use wire:key when rendering multiple components in loops:
Multi-select not working
Initialize the Livewire property as an array:
Enable multiple mode in the blade:
Selected value not displaying
Verify the selected value exists in your options and the optionValue key matches:
Performance Optimization
| Options Count | Recommended Approach |
|---|---|
| < 100 | Client-side filtering (default) — works perfectly |
| 100 – 1,000 | Client-side filtering with wire:key — still performant |
| 1,000+ | Server-side search with Livewire updated* hooks |
Server-side search:
Select only needed columns:
Cache static options:
Testing
The package includes a comprehensive test suite.
Demo Application
The package includes a full-featured demo application.
Visit http://localhost:8000
Contributing
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes and add tests
-
Run tests and code style checks:
- Commit and open a Pull Request
Code Style
- Laravel Pint for PHP formatting
- PSR-12 coding standard
- Pest PHP for testing
Credits
Maintainer
- Ajjitech — GitHub
Original Author
This package is a Bootstrap 5 port of williamug/searchable-select, originally created by William Asaba — GitHub.
Built With
- Laravel — The PHP Framework
- Livewire — Full-stack framework for Laravel
- Alpine.js — Lightweight JavaScript framework
- Bootstrap — CSS framework
License
The MIT License (MIT). Please see License File for more information.
Links
- Packagist — Composer package
- GitHub Repository — Source code
- Issue Tracker — Report bugs or request features
- Changelog — Version history
All versions of searchable-select with dependencies
illuminate/contracts Version ^11.0||^12.0||^13.0
livewire/livewire Version ^3.0||^4.0