Laravel Livewire Async Select

The Livewire Async Select package is a powerful select component for Laravel using Livewire and Alpine.js. It provides a simple Livewire component integration with two-way binding, making it an excellent component for asyncronous searching of large datasets.

Here's a basic example of using the blade component:

<livewire:async-select
    wire:model="userId"
    endpoint="/api/users/search"
    placeholder="Search users..."
/>

To go with the Livewire component, here's an example of the search endpoint:

Route::get('/api/users/search', function (Request $request) {
    $search = $request->get('search', '');
 
    $users = User::query()
        ->when($search, fn($q) => $q->where('name', 'like', "%{$search}%"))
        ->limit(20)
        ->get()
        ->map(fn($user) => [
            'value' => $user->id,
            'label' => $user->name,
        ]);
 
    return response()->json(['data' => $users]);
});

#Main Features

• Asynchronous Loading - Load options dynamically from API endpoints
• Search & Filter - Built-in search with debouncing
• Multiple Selection - Beautiful chip/tag display
• Alpine.js Powered - Lightweight, no jQuery dependency
• Styled with Tailwind CSS - Pre-built styles with las- prefix
• Custom Slots - Fully customizable rendering
• Easy Integration - Native Livewire component
• Two-way Binding - Full wire:model support

#Learn More

Check out the documentation and examples to get started with Livewire Async Select.

The source code is available on GitHub.