Асинхронний вибір у Laravel Livewire

Пакет Livewire Async Select — це потужний компонент для вибору в Laravel, що використовує Livewire та Alpine.js. Він надає просту інтеграцію компонента Livewire з двостороннім зв'язком, що робить його ідеальним для асинхронного пошуку у великих наборах даних.

Ось базовий приклад використання компонента Blade:

<livewire:async-select
    wire:model="userId"
    endpoint="/api/users/search"
    placeholder="Пошук користувачів..."
/>

А також приклад пошукового ендпоінта для компонента Livewire:

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]);
});

# Основні особливості

• Асинхронне завантаження - Динамічне завантаження опцій з API-ендпоінтів
• Пошук та фільтрація - Вбудований пошук з дебаунсингом
• Множинний вибір - Гарний вигляд з використанням чіпів або тегів
• Підтримка Alpine.js - Легковаговий компонент без залежності від jQuery
• Стилі на основі Tailwind CSS - Попередньо створені стилі з префіксом las-
• Користувацькі слоти - Повне налаштування відображення
• Легка інтеграція - Нативний компонент Livewire
• Двосторонній зв'язок - Підтримка wire:model

# Дізнайтеся більше

Перегляньте документацію та приклади, щоб почати роботу з Livewire Async Select.

Джерела коду доступні на GitHub.