前端支持sugg，对接到另外单独的sugg服务 curl "http://localhost:5003/suggest?query=测试&lang=zh&limit=10"

tangwang
1 parent b50d11cd
Showing 1 changed file with 209 additions and 3 deletions Show diff stats
frontend/index.html
@@ -5,6 +5,44 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Product Search - for Shoplazza</title>
     <link rel="stylesheet" href="/static/css/style.css">
+    <style>
+        .suggestions-list {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+            max-height: 300px;
+            overflow-y: auto;
+            z-index: 1000;
+            margin-top: 2px;
+        }
+        .suggestion-item {
+            padding: 10px 15px;
+            cursor: pointer;
+            border-bottom: 1px solid #f0f0f0;
+            transition: background-color 0.2s;
+        }
+        .suggestion-item:hover,
+        .suggestion-item.highlighted {
+            background-color: #f5f5f5;
+        }
+        .suggestion-item:last-child {
+            border-bottom: none;
+        }
+        .suggestion-text {
+            font-size: 14px;
+            color: #333;
+        }
+        .suggestion-meta {
+            font-size: 12px;
+            color: #999;
+            margin-top: 2px;
+        }
+    </style>
 </head>
 <body>
     <div class="page-container">
@@ -29,8 +67,11 @@
                 <label for="skuFilterDimension">sku_filter_dimension:</label>
                 <input type="text" id="skuFilterDimension" placeholder="SKU筛选维度" value="color">
             </div>
-            <input type="text" id="searchInput" placeholder="输入搜索关键词... (支持中文、英文、俄文)"
-                   onkeypress="handleKeyPress(event)">
+            <div class="search-input-wrapper" style="position: relative;">
+                <input type="text" id="searchInput" placeholder="输入搜索关键词... (支持中文、英文、俄文)"
+                       onkeypress="handleKeyPress(event)" oninput="handleSearchInput(event)">
+                <div id="suggestionsList" class="suggestions-list" style="display: none;"></div>
+            </div>
             <button onclick="performSearch()" class="search-btn">Search</button>
         </div>
  
@@ -142,6 +183,171 @@
         <p>SearchEngine © 2025 | API: <span id="apiUrl">Loading...</span></p>
     </footer>
  
-    <script src="/static/js/app.js?v=3.1"></script>
+    <script src="/static/js/app.js?v=3.2"></script>
+    <script>
+        // 自动补全功能
+        const SUGGEST_API = 'http://120.76.41.98:5003/suggest';
+        let debounceTimer = null;
+        let currentSuggestions = [];
+        let selectedIndex = -1;
+        let abortController = null;
+
+        // 防抖函数
+        function debounce(func, wait) {
+            return function(...args) {
+                clearTimeout(debounceTimer);
+                debounceTimer = setTimeout(() => func.apply(this, args), wait);
+            };
+        }
+
+        // 获取建议
+        async function fetchSuggestions(query) {
+            if (!query || query.trim().length === 0) {
+                hideSuggestions();
+                return;
+            }
+
+            // 取消之前的请求
+            if (abortController) {
+                abortController.abort();
+            }
+            abortController = new AbortController();
+
+            try {
+                const url = new URL(SUGGEST_API);
+                url.searchParams.set('query', query);
+                url.searchParams.set('lang', 'zh');
+                url.searchParams.set('limit', '40');
+
+                const response = await fetch(url.toString(), {
+                    signal: abortController.signal,
+                    headers: {
+                        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
+                        'Referer': window.location.origin + '/'
+                    }
+                });
+
+                if (!response.ok) {
+                    throw new Error('请求失败');
+                }
+
+                const data = await response.json();
+                if (data.status === 'success' && data.suggestions) {
+                    currentSuggestions = data.suggestions;
+                    showSuggestions(data.suggestions);
+                } else {
+                    hideSuggestions();
+                }
+            } catch (error) {
+                if (error.name !== 'AbortError') {
+                    console.error('获取建议失败:', error);
+                    hideSuggestions();
+                }
+            }
+        }
+
+        // 显示建议列表
+        function showSuggestions(suggestions) {
+            const list = document.getElementById('suggestionsList');
+            if (!suggestions || suggestions.length === 0) {
+                hideSuggestions();
+                return;
+            }
+
+            list.innerHTML = '';
+            suggestions.forEach((item, index) => {
+                const div = document.createElement('div');
+                div.className = 'suggestion-item';
+                div.dataset.index = index;
+                div.innerHTML = `
+                    <div class="suggestion-text">${escapeHtml(item.canon)}</div>
+                    <div class="suggestion-meta">${item.entry_type} | 频次: ${item.canon_freq}</div>
+                `;
+                div.onclick = () => selectSuggestion(item.canon);
+                div.onmouseenter = () => {
+                    selectedIndex = index;
+                    updateHighlight();
+                };
+                list.appendChild(div);
+            });
+
+            list.style.display = 'block';
+            selectedIndex = -1;
+        }
+
+        // 隐藏建议列表
+        function hideSuggestions() {
+            const list = document.getElementById('suggestionsList');
+            list.style.display = 'none';
+            currentSuggestions = [];
+            selectedIndex = -1;
+        }
+
+        // 选择建议
+        function selectSuggestion(text) {
+            const input = document.getElementById('searchInput');
+            input.value = text;
+            hideSuggestions();
+            performSearch();
+        }
+
+        // 更新高亮
+        function updateHighlight() {
+            const items = document.querySelectorAll('.suggestion-item');
+            items.forEach((item, index) => {
+                if (index === selectedIndex) {
+                    item.classList.add('highlighted');
+                } else {
+                    item.classList.remove('highlighted');
+                }
+            });
+        }
+
+        // HTML转义
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        // 处理输入事件
+        const debouncedFetch = debounce(fetchSuggestions, 300);
+        function handleSearchInput(event) {
+            const query = event.target.value;
+            debouncedFetch(query);
+        }
+
+        // 键盘导航
+        document.addEventListener('keydown', (e) => {
+            const list = document.getElementById('suggestionsList');
+            if (list.style.display === 'none' || currentSuggestions.length === 0) {
+                return;
+            }
+
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                selectedIndex = (selectedIndex + 1) % currentSuggestions.length;
+                updateHighlight();
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                selectedIndex = selectedIndex <= 0 ? currentSuggestions.length - 1 : selectedIndex - 1;
+                updateHighlight();
+            } else if (e.key === 'Enter' && selectedIndex >= 0) {
+                e.preventDefault();
+                selectSuggestion(currentSuggestions[selectedIndex].canon);
+            } else if (e.key === 'Escape') {
+                hideSuggestions();
+            }
+        });
+
+        // 点击外部关闭建议列表
+        document.addEventListener('click', (e) => {
+            const list = document.getElementById('suggestionsList');
+            const input = document.getElementById('searchInput');
+            if (!list.contains(e.target) && e.target !== input) {
+                hideSuggestions();
+            }
+        });
+    </script>
 </body>
 </html>