From 7d82d67b5fe1b5eefba1d8a4a46ce77b5549f7b5 Mon Sep 17 00:00:00 2001
From: Andrey Smakotin <slamfromm@gmail.com>
Date: Tue, 11 Nov 2025 01:35:31 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20frontend=20=D0=B2=D0=B0=D0=BB=D0=B8=D0=B4=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D1=8F=20=D0=BF=D0=BE=D0=B8=D1=81=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5?=
 =?UTF-8?q?=20=D1=81=D0=BF=D0=B8=D1=81=D0=BA=D0=B0=20=D0=BA=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=B5=D0=BD=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Реализовано:
- Frontend валидация: минимум 3 символа для запуска поиска
- Динамическое отображение подсказки при попытке отправить поиск < 3 символов
- Визуальное выделение ошибки (is-invalid класс для input)
- Автоматическое скрытие ошибки при вводе 3+ символов

Backend уже использует ту же логику оптимизированного поиска:
- Те же стратегии поиска (name_only, universal, email и т.д.)
- Тот же SQL LIKE запрос для поиска по цифрам телефона
- Тот же API эндпоинт api_search_customers()

Теперь обе страницы (создание заказа и список клиентов) используют
единую оптимизированную логику поиска и требуют минимум 3 символа.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../templates/customers/customer_list.html    | 45 +++++++++++++++++--
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/myproject/customers/templates/customers/customer_list.html b/myproject/customers/templates/customers/customer_list.html
index 193d44e..55aeaf5 100644
--- a/myproject/customers/templates/customers/customer_list.html
+++ b/myproject/customers/templates/customers/customer_list.html
@@ -15,18 +15,57 @@
             <!-- Search Form -->
             <div class="card mb-4">
                 <div class="card-body">
-                    <form method="get" class="row g-3">
+                    <form method="get" class="row g-3" id="search-form">
                         <div class="col-md-6">
                             <input type="text" class="form-control" name="q"
-                                   value="{{ query|default:'' }}" placeholder="Поиск по имени, email или телефону (минимум 3 символа)...">
+                                   value="{{ query|default:'' }}" placeholder="Поиск по имени, email или телефону (минимум 3 символа)..." id="search-input">
+                            <small class="form-text text-muted" id="search-hint" style="display: none; color: #dc3545 !important;">
+                                Введите минимум 3 символа для поиска
+                            </small>
                         </div>
                         <div class="col-md-3">
-                            <button type="submit" class="btn btn-outline-primary">Поиск</button>
+                            <button type="submit" class="btn btn-outline-primary" id="search-btn">Поиск</button>
                             {% if query %}
                                 <a href="{% url 'customers:customer-list' %}" class="btn btn-outline-secondary">Очистить</a>
                             {% endif %}
                         </div>
                     </form>
+                    <script>
+                        document.getElementById('search-form').addEventListener('submit', function(e) {
+                            const searchInput = document.getElementById('search-input');
+                            const searchValue = searchInput.value.trim();
+                            const searchHint = document.getElementById('search-hint');
+
+                            // Если поле пусто или содержит менее 3 символов, не отправляем форму
+                            if (searchValue && searchValue.length < 3) {
+                                e.preventDefault();
+                                searchHint.style.display = 'block';
+                                searchInput.classList.add('is-invalid');
+                                return false;
+                            }
+
+                            // Если поле пусто, тоже не отправляем (это будет просто пусто)
+                            if (!searchValue) {
+                                e.preventDefault();
+                                return false;
+                            }
+
+                            // Все хорошо, отправляем
+                            searchHint.style.display = 'none';
+                            searchInput.classList.remove('is-invalid');
+                        });
+
+                        // Убираем ошибку при вводе
+                        document.getElementById('search-input').addEventListener('input', function() {
+                            const searchValue = this.value.trim();
+                            const searchHint = document.getElementById('search-hint');
+
+                            if (searchValue.length >= 3) {
+                                searchHint.style.display = 'none';
+                                this.classList.remove('is-invalid');
+                            }
+                        });
+                    </script>
                 </div>
             </div>