Download the PHP package fabioguin/livewire-searchable-select without Composer
On this page you can find all versions of the php package fabioguin/livewire-searchable-select. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download fabioguin/livewire-searchable-select
More information about fabioguin/livewire-searchable-select
Files in fabioguin/livewire-searchable-select
Package livewire-searchable-select
Short Description High-performance Livewire component for searchable select inputs with relevance-based ordering, caching, and optimized UX
License MIT
Homepage https://github.com/fabioguin/livewire-searchable-select
Informations about the package livewire-searchable-select
Livewire Searchable Select
High-performance Livewire component for searchable select inputs with relevance-based ordering, intelligent caching, and optimized UX.
Features
- High Performance: Optimized database queries with intelligent caching
- Relevance-Based Ordering: Smart search results ranked by relevance
- Debounced Input: Smooth UX with 300ms debouncing to reduce server load
- Redis Caching: Automatic caching of search results for better performance
- SQL Injection Protection: Secure input sanitization and validation
- Responsive Design: Works perfectly on all device sizes
- Customizable: Easy to customize with CSS classes and configuration
- Model Scopes: Support for complex model filtering with scopes
- Multi-language: Built-in internationalization support
Requirements
- Laravel 10 or 11
- Livewire 3.0+
- Alpine JS (included with Livewire)
- Redis (optional, for caching)
Installation
You can install the package via composer:
Redis Configuration (Optional but Recommended)
For optimal performance, configure Redis as your cache driver:
The package will automatically use Redis for caching search results, significantly improving performance.
Basic Usage
-
use trait in your livewire component:
- Use the component in your blade view, and pass in a parameters:
Performance Features
Intelligent Caching
The component automatically caches search results for 5 minutes, dramatically reducing database load:
Relevance-Based Ordering
Search results are intelligently ordered by relevance:
- Exact match: 100 points
- Starts with: 80 points
- Contains: 60 points
- Ends with: 40 points
Debounced Input
Input is debounced by 300ms to prevent excessive server requests:
Properties
Property | Arguments | Result | Example |
---|---|---|---|
property | String - required property name | Define the property name | |
model-app | String - required full model name | Define the source of data that will be select | |
model-app-scope | String - optional name of model sope | Define model scope for filtering results | |
option-text | String - required show column on option | Define the column(s) in model that want to be show in select option | |
option-value-column | String - required set value | Define the column name as a value data that will be selected | |
active-option-text | Mixed - optional set active value text | Define the default selected option to show on select | |
active-option-value | Mixed - optional set active value | Define the default selected option value to pass in the model | |
search-columns | Array - required search column | Define the column in model that want to be searched | |
search-min-chars | Int - optional minimum character | Define minimum character for trigger search event; default: 0 | |
search-limit-results | Int - optional max results to view in the dropdown | Define the lenght of result for dropdown; default: 10 | |
input-extra-classes | String - optional add extra classes | Define the extra classes for the input, anyway each element has a class without defined attributes that can be exploited for customization, for example: "select-searchable-input", "select-searchable-input-clear-value", etc. | |
input-placeholder | String - optional placeholder name | Define the placeholder for select input |
model-app-scope
With this parameter you can define a query scope of the model to filter the search results in a complex way (see official Laravel documentation). This makes the component even more flexible and usable in multiple contexts. Remember to use a string with the camel case syntax without specifying that it is a "scope" (see example).
Customization
Livewire Select is designed to be easily customizable. You can publish and modify the configuration, views, and language files to suit your needs.
Configuration
You can publish the configuration file with:
This will publish a livewire-searchable-select.php config file to your config directory. Here you can change the default settings of Livewire Select.
Views
If you need to modify the views, you can publish them with:
This will publish the view files to resources/views/vendor/livewire-searchable-select. You can edit these files to change the appearance of the select input.
Language
To customize the language strings, you can publish the language files with:
This will publish the language files to resources/lang/vendor/livewire-searchable-select. You can edit these files to change the text used by Livewire Select.
What's New in v2.0.0
Major Improvements
- Refactored Architecture: Complete separation of concerns with Config and Service classes
- Security Enhanced: SQL injection protection with input sanitization
- Performance Optimized: Intelligent caching and query optimization
- Smart Ordering: Relevance-based search result ranking
- Better UX: Debounced input for smooth user experience
- Test Coverage: Comprehensive test suite for reliability
Breaking Changes
- Namespace Update:
SearchableSelect
trait moved toFabioGuin\LivewireSearchableSelect\Traits\SearchableSelect
- Architecture: New Config and Service classes for better maintainability
- Input Handling: Replaced
wire:model
with debounced Alpine.js input
Migration from v1.x
1. Update Trait Import
2. No Other Changes Required
The component API remains the same, so your existing Blade templates will continue to work without modification.
3. Optional: Enable Redis Caching
For better performance, configure Redis as your cache driver (see Installation section above).
Future Developments
The package is actively maintained with the following planned features:
- CSS Framework Support: Tailwind CSS and Bootstrap 4/5 compatibility
- Advanced Analytics: Search analytics and performance metrics
- Real-time Updates: WebSocket support for live updates
- Enhanced i18n: More language support and RTL compatibility
- Mobile Optimization: Touch-friendly mobile interactions
- Advanced Search: Fuzzy search and typo tolerance
Inspired by https://github.com/mitratek/livewire-select
We ❤️ Semantic Versioning https://semver.org/
Open to work, contact me: https://www.linkedin.com/in/fabio-guin-starzero/
All versions of livewire-searchable-select with dependencies
livewire/livewire Version ^3.0
illuminate/support Version ^10.0|^11.0