POS search improvements: clear button, 600ms debounce, empty screen on clear

myproject/pos/static/pos/js/terminal.js

@@ -1013,25 +1013,51 @@ function getCsrfToken() {
 
 // Обработчик поиска с debounce
 const searchInput = document.getElementById('searchInput');
+const clearSearchBtn = document.getElementById('clearSearchBtn');
+
 searchInput.addEventListener('input', (e) => {
   const query = e.target.value.trim();
   
+  // Показываем/скрываем кнопку очистки
+  if (e.target.value.length > 0) {
+    clearSearchBtn.style.display = 'block';
+  } else {
+    clearSearchBtn.style.display = 'none';
+  }
+  
   // Отменяем предыдущий таймер
   if (searchDebounceTimer) {
     clearTimeout(searchDebounceTimer);
   }
   
+  // Если поле пустое — очищаем экран
+  if (query === '') {
+    currentSearchQuery = '';
+    ITEMS = [];  // Очистка
+    renderProducts();  // Пустой экран
+    return;
+  }
+  
   // Для витрины — мгновенная клиентская фильтрация
   if (isShowcaseView) {
     renderProducts();
     return;
   }
   
-  // Для обычных товаров/комплектов — серверный поиск с debounce 300мс
+  // Для обычных товаров/комплектов — серверный поиск с debounce 600мс
   searchDebounceTimer = setTimeout(async () => {
     currentSearchQuery = query;
     await loadItems();  // Перезагрузка с серверным поиском
-  }, 300);
+  }, 600);
+});
+
+// Обработчик кнопки очистки поиска
+clearSearchBtn.addEventListener('click', () => {
+  searchInput.value = '';
+  clearSearchBtn.style.display = 'none';
+  currentSearchQuery = '';
+  ITEMS = [];
+  renderProducts();  // Пустой экран
 });
 
 // Инициализация

myproject/pos/templates/pos/terminal.html

@@ -15,7 +15,12 @@
     <div class="col-md-8" style="display: flex; flex-direction: column; height: 100%;">
       <!-- Search Box -->
       <div class="mb-3">
+        <div class="input-group">
           <input type="text" class="form-control" id="searchInput" placeholder="Поиск по товарам...">
+          <button class="btn btn-outline-secondary" type="button" id="clearSearchBtn" style="display: none;">
+            <i class="bi bi-x-lg"></i>
+          </button>
+        </div>
       </div>
       
       <!-- Categories -->