Livewire Searchable Select

Livewire component for searchable select inputs

Requirements

• Laravel 10 or 11
• Livewire
• Tailwind
• Alpine JS

Installation

You can install the package via composer:

composer require fabioguin/livewire-searchable-select

Basic Usage

• use trait SearchableSelect in your livewire component:

<?php

namespace App\Http\Livewire\CreateUser

use Livewire\Component;
use FabioGuin\LivewireSearchableSelect\SearchableSelect;

class CreateUser extends Component
{
    use SearchableSelect;

    // set properties to get selected value from LivewireSearchableSelect
    public int $country_id;
}

• Use the livewire-searchable-select component in your blade view, and pass in a parameters:

<livewire:select-searchable-input
        property="country_id"
        model-app="\App\Models\Country"
        model-app-scope="isActive"
        option-text="{name}"
        option-value-column="id"
        active-option-text="{{ request()->user()->country_name }}"
        active-option-value="{{ request()->user()->country_id }}"
        :search-columns="['name']"
        :search-min-chars="2"
        :search-limit-results="15"
        input-extra-classes="mt-3"
        input-placeholder="Select country" />

Properties

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:

php artisan vendor:publish --provider="FabioGuin\LivewireSearchableSelect\LivewireSearchableSelectServiceProvider" --tag="config"

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:

php artisan vendor:publish --provider="FabioGuin\LivewireSearchableSelect\LivewireSearchableSelectServiceProvider" --tag="views"

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:

php artisan vendor:publish --provider="FabioGuin\LivewireSearchableSelect\LivewireSearchableSelectServiceProvider" --tag="lang"

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.

TODO and Future Developments

The Livewire Select package is currently under development and there are several features and improvements planned for future releases.

Here is a list of the planned tasks:

• Support for Tailwind CSS and Bootstrap 4: Currently, the views are designed for Bootstrap 5. However, the goal is to add support for Tailwind CSS and Bootstrap 4. This will require creating separate versions of the views for each of these CSS frameworks.
• Documentation Improvements: The documentation will be continuously updated to reflect new features and improvements. This includes adding more examples and tutorials.
• Testing and Bug Fixes: We will continue to test the package to identify and fix any bugs. If you find a bug, please report it via the “Issues” section on GitHub.
• Performance Improvements: We are always looking for ways to improve the performance of the package. This could include optimizing the code and adding new features to improve efficiency.
• Support for Other Livewire Features: We are exploring the possibility of adding support for other Livewire features, such as pagination and lazy loading.

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/