Feat: Универсальный компонент Searchable Select

✅ TomSelect библиотека (15KB vs 100KB у Select2)
✅ Blade компонент x-searchable-select
✅ API endpoint /api/organizations/search
✅ Поиск по названию и ИНН
✅ AJAX загрузка данных
✅ Используется в create.blade.php для групп
✅ Модульная архитектура - можно использовать для других полей

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

app/Http/Controllers/Admin/GroupUserController.php

@@ -47,9 +47,7 @@ class GroupUserController extends Controller
     {
         Gate::authorize('create', Group::class);
         
-        $organizations = Organization::pluck('name', 'id');
+        return view('admin.groups.create');
-        
-        return view('admin.groups.create', compact('organizations'));
     }
 
     public function store(Request $request)

app/Http/Controllers/Api/OrganizationSearchController.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Controllers\Api;
+
+use App\Http\Controllers\Controller;
+use App\Models\Organization;
+use Illuminate\Http\Request;
+
+class OrganizationSearchController extends Controller
+{
+    public function __invoke(Request $request)
+    {
+        $query = $request->get('q', '');
+        
+        $organizations = Organization::query()
+            ->where('name', 'like', "%{$query}%")
+            ->orWhere('inn', 'like', "%{$query}%")
+            ->orderBy('name')
+            ->limit(50)
+            ->get()
+            ->map(function($org) {
+                return [
+                    'id' => $org->id,
+                    'text' => $org->name . ($org->inn ? " (ИНН: {$org->inn})" : ''),
+                ];
+            });
+        
+        return response()->json($organizations);
+    }
+}

resources/views/admin/groups/create.blade.php

@@ -30,13 +30,13 @@
                                 
                                 <div class="mb-3" id="organizationField" style="display:none;">
                                     <label class="form-label">Организация *</label>
-                                    <select name="organization_id" class="form-select @error('organization_id') is-invalid @enderror">
+                                    <x-searchable-select
-                                        <option value="">Выберите организацию</option>
+                                        name="organization_id"
-                                        @foreach($organizations as $id => $name)
+                                        url="{{ route('api.organizations.search') }}"
-                                        <option value="{{ $id }}" {{ old('organization_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
+                                        placeholder="Начните вводить название организации..."
-                                        @endforeach
+                                        :required="true"
-                                    </select>
+                                    />
-                                    @error('organization_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
+                                    @error('organization_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                                 </div>
                                 
                                 <div class="mb-3">
@@ -90,3 +90,6 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 </script>
 @endsection
+
+@push('scripts')
+@endpush

resources/views/components/searchable-select.blade.php

@@ -0,0 +1,55 @@
+@props(['name', 'url', 'placeholder' => 'Начните вводить...', 'value' => null, 'required' => false])
+
+<input type="hidden" name="{{ $name }}" id="{{ $name }}" value="{{ $value }}">
+<select id="{{ $name }}-select" class="form-select @error($name) is-invalid @enderror" {{ $required ? 'required' : '' }}></select>
+
+@push('scripts')
+<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const select = new TomSelect('#{{ $name }}-select', {
+        valueField: 'id',
+        labelField: 'text',
+        searchField: 'text',
+        placeholder: '{{ $placeholder }}',
+        preload: false,
+        maxOptions: null,
+        load: function(query, callback) {
+            if (query.length < 2) return callback();
+            
+            fetch('{{ $url }}?q=' + encodeURIComponent(query))
+                .then(response => response.json())
+                .then(json => {
+                    callback(json);
+                }).catch(() => {
+                    callback();
+                });
+        },
+        render: {
+            option: function(data, escape) {
+                return '<div>' + escape(data.text) + '</div>';
+            },
+            item: function(data, escape) {
+                return '<div>' + escape(data.text) + '</div>';
+            }
+        },
+        onChange: function(value) {
+            document.getElementById('{{ $name }}').value = value;
+        }
+    });
+    
+    @if($value)
+    fetch('{{ $url }}?q=')
+        .then(response => response.json())
+        .then(items => {
+            const item = items.find(i => i.id == '{{ $value }}');
+            if (item) {
+                select.addOption(item);
+                select.setValue('{{ $value }}');
+            }
+        });
+    @endif
+});
+</script>
+@endpush

routes/web.php

@@ -11,6 +11,7 @@ use App\Http\Controllers\Admin\TestController;
 use App\Http\Controllers\Admin\QuestionController;
 use App\Http\Controllers\Admin\CourseAssignmentController;
 use App\Http\Controllers\Admin\GroupUserController;
+use App\Http\Controllers\Api\OrganizationSearchController;
 use App\Http\Controllers\DashboardController;
 use Illuminate\Support\Facades\Route;
 
@@ -53,4 +54,7 @@ Route::middleware('auth')->group(function () {
         Route::post('/users/{user}/groups/add', [GroupUserController::class, 'addUser'])->name('groups.users.add');
         Route::delete('/groups/{group}/users/{user}/remove', [GroupUserController::class, 'removeUser'])->name('groups.users.remove');
     });
+    
+    // API для поиска
+    Route::get('/api/organizations/search', OrganizationSearchController::class)->name('api.organizations.search');
 });