Fix: searchable-select для динамических элементов

✅ initTomSelectForElement() для инициализации новых элементов
✅ TomSelect для курсов и организаций
✅ Ручная инициализация при добавлении элемента

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

resources/views/admin/course-requests/create.blade.php

@@ -23,22 +23,23 @@
                                             <!-- Строка 1: Курс -->
                                             <div class="col-md-12">
                                                 <label class="form-label">Курс *</label>
-                                                <x-searchable-select
+                                                <select name="items[0][course_id]" class="form-select course-select" required>
-                                                    name="items[0][course_id]"
+                                                    <option value="">Выберите курс</option>
-                                                    url="{{ route('api.courses.search') }}"
+                                                    @foreach($courses as $id => $title)
-                                                    placeholder="Выберите курс..."
+                                                    <option value="{{ $id }}">{{ $title }}</option>
-                                                    :required="true"
+                                                    @endforeach
-                                                />
+                                                </select>
                                             </div>
                                             
                                             <!-- Строка 2: Получатели -->
                                             <div class="col-md-4">
                                                 <label class="form-label">Организация</label>
-                                                <x-searchable-select
+                                                <select name="items[0][organization_id]" class="form-select org-select">
-                                                    name="items[0][organization_id]"
+                                                    <option value="">Не выбрано</option>
-                                                    url="{{ route('api.organizations.search') }}"
+                                                    @foreach($organizations as $id => $name)
-                                                    placeholder="Или оставьте пустым..."
+                                                    <option value="{{ $id }}">{{ $name }}</option>
-                                                />
+                                                    @endforeach
+                                                </select>
                                                 <small class="text-muted">И</small>
                                             </div>
                                             <div class="col-md-4">
@@ -114,9 +115,62 @@
 </div>
 
 @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>
 let itemCount = 1;
 
+// Функция инициализации TomSelect для нового элемента
+function initTomSelectForElement(rowElement) {
+    // Инициализация для курса
+    const courseSelect = rowElement.querySelector('.course-select');
+    if (courseSelect && !courseSelect.tomselect) {
+        new TomSelect(courseSelect, {
+            valueField: 'id',
+            labelField: 'text',
+            searchField: 'text',
+            placeholder: 'Выберите курс...',
+            preload: false,
+            maxOptions: null,
+            load: function(query, callback) {
+                if (query.length < 2) return callback();
+                fetch('/api/courses/search?q=' + encodeURIComponent(query))
+                    .then(response => response.json())
+                    .then(json => callback(json))
+                    .catch(() => callback());
+            }
+        });
+    }
+    
+    // Инициализация для организации
+    const orgSelect = rowElement.querySelector('.org-select');
+    if (orgSelect && !orgSelect.tomselect) {
+        new TomSelect(orgSelect, {
+            valueField: 'id',
+            labelField: 'text',
+            searchField: 'text',
+            placeholder: 'Или оставьте пустым...',
+            preload: false,
+            maxOptions: null,
+            load: function(query, callback) {
+                if (query.length < 2) return callback();
+                fetch('/api/organizations/search?q=' + encodeURIComponent(query))
+                    .then(response => response.json())
+                    .then(json => callback(json))
+                    .catch(() => callback());
+            }
+        });
+    }
+}
+
+// Инициализация для первого элемента при загрузке
+document.addEventListener('DOMContentLoaded', function() {
+    const firstRow = document.querySelector('.item-row');
+    if (firstRow) {
+        initTomSelectForElement(firstRow);
+    }
+});
+
 document.getElementById('add-item-btn').addEventListener('click', function() {
     const container = document.getElementById('items-container');
     const newItem = document.createElement('div');
@@ -126,7 +180,7 @@ document.getElementById('add-item-btn').addEventListener('click', function() {
             <!-- Строка 1: Курс -->
             <div class="col-md-12">
                 <label class="form-label">Курс *</label>
-                <select name="items[${itemCount}][course_id]" class="form-select" required>
+                <select name="items[${itemCount}][course_id]" class="form-select course-select" required>
                     <option value="">Выберите курс</option>
                     @foreach($courses as $id => $title)
                     <option value="{{ $id }}">{{ $title }}</option>
@@ -137,7 +191,7 @@ document.getElementById('add-item-btn').addEventListener('click', function() {
             <!-- Строка 2: Получатели -->
             <div class="col-md-4">
                 <label class="form-label">Организация</label>
-                <select name="items[${itemCount}][organization_id]" class="form-select">
+                <select name="items[${itemCount}][organization_id]" class="form-select org-select">
                     <option value="">Не выбрано</option>
                     @foreach($organizations as $id => $name)
                     <option value="{{ $id }}">{{ $name }}</option>
@@ -168,6 +222,10 @@ document.getElementById('add-item-btn').addEventListener('click', function() {
         <button type="button" class="btn btn-sm btn-outline-danger mt-2 remove-item"><i class="bi bi-trash"></i> Удалить</button>
     `;
     container.appendChild(newItem);
+    
+    // Инициализируем TomSelect для нового элемента
+    initTomSelectForElement(newItem);
+    
     itemCount++;
     
     // Показываем кнопки удаления