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>

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">
-                                        <option value="">Выберите организацию</option>
-                                        @foreach($organizations as $id => $name)
-                                        <option value="{{ $id }}" {{ old('organization_id') == $id ? 'selected' : '' }}>{{ $name }}</option>
-                                        @endforeach
-                                    </select>
-                                    @error('organization_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
+                                    <x-searchable-select
+                                        name="organization_id"
+                                        url="{{ route('api.organizations.search') }}"
+                                        placeholder="Начните вводить название организации..."
+                                        :required="true"
+                                    />
+                                    @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