|
|
/**
|
|
|
* 搜索功能JavaScript文件
|
|
|
* 实现搜索框的弹出/收起动画和交互功能
|
|
|
* 包含新闻搜索模块的交互功能
|
|
|
*/
|
|
|
|
|
|
// 新闻搜索模块功能
|
|
|
(function() {
|
|
|
'use strict';
|
|
|
|
|
|
// 等待DOM加载完成
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
initNewsSearch();
|
|
|
});
|
|
|
|
|
|
function initNewsSearch() {
|
|
|
const searchInput = document.getElementById('news-search');
|
|
|
const categorySelect = document.getElementById('news-category');
|
|
|
const searchForm = document.querySelector('.news-search-form');
|
|
|
const suggestionsContainer = document.getElementById('search-suggestions');
|
|
|
|
|
|
if (!searchInput || !categorySelect || !searchForm) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 搜索建议数据（可以从后端获取）
|
|
|
let searchSuggestions = [];
|
|
|
let currentSuggestionIndex = -1;
|
|
|
|
|
|
// 分类下拉动画
|
|
|
categorySelect.addEventListener('focus', function() {
|
|
|
this.style.transform = 'scale(1.02)';
|
|
|
});
|
|
|
|
|
|
categorySelect.addEventListener('blur', function() {
|
|
|
this.style.transform = 'scale(1)';
|
|
|
});
|
|
|
|
|
|
// 分类选择改变时自动提交表单
|
|
|
categorySelect.addEventListener('change', function() {
|
|
|
const selectedOption = this.options[this.selectedIndex];
|
|
|
const url = selectedOption.getAttribute('data-url');
|
|
|
const searchVal = searchInput.value.trim();
|
|
|
|
|
|
// 如果搜索词为空且有目标URL，直接跳转（用于“显示全部”或切换分类）
|
|
|
if (searchVal === '' && url) {
|
|
|
window.location.href = url;
|
|
|
} else {
|
|
|
searchForm.submit();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 搜索输入框事件
|
|
|
searchInput.addEventListener('input', function() {
|
|
|
const query = this.value.trim();
|
|
|
if (query.length >= 2) {
|
|
|
fetchSearchSuggestions(query);
|
|
|
} else {
|
|
|
hideSuggestions();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 键盘事件处理
|
|
|
searchInput.addEventListener('keydown', function(e) {
|
|
|
if (e.key === 'Enter') {
|
|
|
e.preventDefault();
|
|
|
if (currentSuggestionIndex >= 0 && searchSuggestions[currentSuggestionIndex]) {
|
|
|
this.value = searchSuggestions[currentSuggestionIndex];
|
|
|
hideSuggestions();
|
|
|
}
|
|
|
searchForm.submit();
|
|
|
} else if (e.key === 'ArrowDown') {
|
|
|
e.preventDefault();
|
|
|
navigateSuggestions(1);
|
|
|
} else if (e.key === 'ArrowUp') {
|
|
|
e.preventDefault();
|
|
|
navigateSuggestions(-1);
|
|
|
} else if (e.key === 'Escape') {
|
|
|
hideSuggestions();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 点击外部隐藏建议
|
|
|
document.addEventListener('click', function(e) {
|
|
|
if (!searchInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
|
|
|
hideSuggestions();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 获取搜索建议
|
|
|
function fetchSearchSuggestions(query) {
|
|
|
// 模拟搜索建议（实际项目中应该从后端API获取）
|
|
|
const mockSuggestions = [
|
|
|
'新能源汽车',
|
|
|
'新能源政策',
|
|
|
'新能源技术',
|
|
|
'新能源发展',
|
|
|
'新能源投资',
|
|
|
'太阳能发电',
|
|
|
'风能发电',
|
|
|
'储能技术',
|
|
|
'电池技术',
|
|
|
'充电桩建设'
|
|
|
];
|
|
|
|
|
|
searchSuggestions = mockSuggestions.filter(item =>
|
|
|
item.toLowerCase().includes(query.toLowerCase())
|
|
|
).slice(0, 5);
|
|
|
|
|
|
showSuggestions();
|
|
|
}
|
|
|
|
|
|
// 显示搜索建议
|
|
|
function showSuggestions() {
|
|
|
if (searchSuggestions.length === 0) {
|
|
|
hideSuggestions();
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
let html = '';
|
|
|
searchSuggestions.forEach((suggestion, index) => {
|
|
|
html += `<div class="suggestion-item" data-index="${index}">${suggestion}</div>`;
|
|
|
});
|
|
|
|
|
|
suggestionsContainer.innerHTML = html;
|
|
|
suggestionsContainer.classList.add('show');
|
|
|
|
|
|
// 绑定建议项点击事件
|
|
|
suggestionsContainer.querySelectorAll('.suggestion-item').forEach(item => {
|
|
|
item.addEventListener('click', function() {
|
|
|
searchInput.value = this.textContent;
|
|
|
hideSuggestions();
|
|
|
searchForm.submit();
|
|
|
});
|
|
|
|
|
|
item.addEventListener('mouseenter', function() {
|
|
|
currentSuggestionIndex = parseInt(this.dataset.index);
|
|
|
updateSuggestionHighlight();
|
|
|
});
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 隐藏搜索建议
|
|
|
function hideSuggestions() {
|
|
|
suggestionsContainer.classList.remove('show');
|
|
|
currentSuggestionIndex = -1;
|
|
|
}
|
|
|
|
|
|
// 导航搜索建议
|
|
|
function navigateSuggestions(direction) {
|
|
|
if (searchSuggestions.length === 0) return;
|
|
|
|
|
|
currentSuggestionIndex += direction;
|
|
|
|
|
|
if (currentSuggestionIndex < 0) {
|
|
|
currentSuggestionIndex = searchSuggestions.length - 1;
|
|
|
} else if (currentSuggestionIndex >= searchSuggestions.length) {
|
|
|
currentSuggestionIndex = 0;
|
|
|
}
|
|
|
|
|
|
updateSuggestionHighlight();
|
|
|
}
|
|
|
|
|
|
// 更新建议高亮
|
|
|
function updateSuggestionHighlight() {
|
|
|
const items = suggestionsContainer.querySelectorAll('.suggestion-item');
|
|
|
items.forEach((item, index) => {
|
|
|
if (index === currentSuggestionIndex) {
|
|
|
item.classList.add('active');
|
|
|
} else {
|
|
|
item.classList.remove('active');
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 表单提交处理
|
|
|
searchForm.addEventListener('submit', function(e) {
|
|
|
const query = searchInput.value.trim();
|
|
|
const category = categorySelect.value;
|
|
|
|
|
|
if (!query && !category) {
|
|
|
e.preventDefault();
|
|
|
searchInput.focus();
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 添加加载动画
|
|
|
const searchButton = searchForm.querySelector('.search-button');
|
|
|
if (searchButton) {
|
|
|
searchButton.style.opacity = '0.7';
|
|
|
searchButton.style.transform = 'scale(0.95)';
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 平滑的焦点动画
|
|
|
searchInput.addEventListener('focus', function() {
|
|
|
this.parentElement.style.transform = 'scale(1.02)';
|
|
|
this.parentElement.style.boxShadow = '0 0 0 3px rgba(0, 123, 255, 0.1)';
|
|
|
});
|
|
|
|
|
|
searchInput.addEventListener('blur', function() {
|
|
|
this.parentElement.style.transform = 'scale(1)';
|
|
|
this.parentElement.style.boxShadow = 'none';
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 页面加载完成后初始化新闻搜索功能
|
|
|
if (document.readyState === 'loading') {
|
|
|
document.addEventListener('DOMContentLoaded', initNewsSearch);
|
|
|
} else {
|
|
|
initNewsSearch();
|
|
|
}
|
|
|
})();
|
|
|
|
|
|
(function() {
|
|
|
'use strict';
|
|
|
|
|
|
// DOM元素
|
|
|
let searchToggle, searchOverlay, searchInput, searchClose, searchForm;
|
|
|
|
|
|
// 初始化函数
|
|
|
function initSearch() {
|
|
|
// 获取DOM元素
|
|
|
searchToggle = document.getElementById('searchToggle');
|
|
|
searchOverlay = document.getElementById('searchOverlay');
|
|
|
searchInput = document.getElementById('searchInput');
|
|
|
searchClose = document.getElementById('searchClose');
|
|
|
searchForm = document.querySelector('.search-form');
|
|
|
|
|
|
if (!searchToggle || !searchOverlay) {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
// 绑定事件
|
|
|
bindEvents();
|
|
|
|
|
|
// 初始化GSAP动画（如果可用）
|
|
|
if (typeof gsap !== 'undefined') {
|
|
|
initGSAPAnimations();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 绑定事件
|
|
|
function bindEvents() {
|
|
|
// 搜索按钮点击事件
|
|
|
searchToggle.addEventListener('click', openSearch);
|
|
|
|
|
|
// 关闭按钮点击事件
|
|
|
if (searchClose) {
|
|
|
searchClose.addEventListener('click', closeSearch);
|
|
|
}
|
|
|
|
|
|
// 遮罩层点击事件
|
|
|
searchOverlay.addEventListener('click', function(e) {
|
|
|
if (e.target === searchOverlay) {
|
|
|
closeSearch();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// ESC键关闭搜索
|
|
|
document.addEventListener('keydown', function(e) {
|
|
|
if (e.key === 'Escape' && searchOverlay.classList.contains('active')) {
|
|
|
closeSearch();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 搜索表单提交事件
|
|
|
if (searchForm) {
|
|
|
searchForm.addEventListener('submit', handleSearchSubmit);
|
|
|
}
|
|
|
|
|
|
// 搜索输入框事件
|
|
|
if (searchInput) {
|
|
|
searchInput.addEventListener('input', handleSearchInput);
|
|
|
searchInput.addEventListener('focus', handleSearchFocus);
|
|
|
searchInput.addEventListener('blur', handleSearchBlur);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 打开搜索框
|
|
|
function openSearch() {
|
|
|
searchOverlay.classList.add('active');
|
|
|
searchToggle.classList.add('active');
|
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
|
|
// 延迟聚焦到输入框
|
|
|
setTimeout(() => {
|
|
|
if (searchInput) {
|
|
|
searchInput.focus();
|
|
|
}
|
|
|
}, 400);
|
|
|
|
|
|
// 触发自定义事件
|
|
|
document.dispatchEvent(new CustomEvent('searchOpened'));
|
|
|
}
|
|
|
|
|
|
// 关闭搜索框
|
|
|
function closeSearch() {
|
|
|
searchOverlay.classList.remove('active');
|
|
|
searchToggle.classList.remove('active');
|
|
|
document.body.style.overflow = '';
|
|
|
|
|
|
// 清空输入框（可选）
|
|
|
if (searchInput) {
|
|
|
// searchInput.value = '';
|
|
|
}
|
|
|
|
|
|
// 触发自定义事件
|
|
|
document.dispatchEvent(new CustomEvent('searchClosed'));
|
|
|
}
|
|
|
|
|
|
// 处理搜索表单提交
|
|
|
function handleSearchSubmit(e) {
|
|
|
const query = searchInput.value.trim();
|
|
|
|
|
|
if (!query) {
|
|
|
e.preventDefault();
|
|
|
searchInput.focus();
|
|
|
|
|
|
// 添加震动效果
|
|
|
if (typeof gsap !== 'undefined') {
|
|
|
gsap.to(searchInput, {
|
|
|
x: [-10, 10, -8, 8, -6, 6, -4, 4, -2, 2, 0],
|
|
|
duration: 0.6,
|
|
|
ease: "power2.out"
|
|
|
});
|
|
|
} else {
|
|
|
searchInput.classList.add('shake');
|
|
|
setTimeout(() => {
|
|
|
searchInput.classList.remove('shake');
|
|
|
}, 600);
|
|
|
}
|
|
|
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
// 可以在这里添加搜索分析代码
|
|
|
if (typeof gtag !== 'undefined') {
|
|
|
gtag('event', 'search', {
|
|
|
search_term: query
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 处理搜索输入
|
|
|
function handleSearchInput(e) {
|
|
|
const query = e.target.value.trim();
|
|
|
|
|
|
// 可以在这里实现实时搜索建议
|
|
|
if (query.length >= 2) {
|
|
|
// debounce搜索请求
|
|
|
clearTimeout(handleSearchInput.timeout);
|
|
|
handleSearchInput.timeout = setTimeout(() => {
|
|
|
fetchSearchSuggestions(query);
|
|
|
}, 300);
|
|
|
} else {
|
|
|
hideSuggestions();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 搜索输入框获得焦点
|
|
|
function handleSearchFocus() {
|
|
|
searchInput.parentElement.classList.add('focused');
|
|
|
}
|
|
|
|
|
|
// 搜索输入框失去焦点
|
|
|
function handleSearchBlur() {
|
|
|
searchInput.parentElement.classList.remove('focused');
|
|
|
}
|
|
|
|
|
|
// 获取搜索建议（示例实现）
|
|
|
function fetchSearchSuggestions(query) {
|
|
|
// 这里可以实现AJAX搜索建议
|
|
|
// 示例：向WordPress REST API发送请求
|
|
|
/*
|
|
|
fetch(`${themeData.ajaxUrl}?action=search_suggestions&query=${encodeURIComponent(query)}&nonce=${themeData.nonce}`)
|
|
|
.then(response => response.json())
|
|
|
.then(data => {
|
|
|
if (data.success) {
|
|
|
showSuggestions(data.data);
|
|
|
}
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.error('搜索建议获取失败:', error);
|
|
|
});
|
|
|
*/
|
|
|
}
|
|
|
|
|
|
// 显示搜索建议
|
|
|
function showSuggestions(suggestions) {
|
|
|
let suggestionsContainer = document.querySelector('.search-suggestions');
|
|
|
|
|
|
if (!suggestionsContainer) {
|
|
|
suggestionsContainer = document.createElement('div');
|
|
|
suggestionsContainer.className = 'search-suggestions';
|
|
|
searchInput.parentElement.appendChild(suggestionsContainer);
|
|
|
}
|
|
|
|
|
|
if (suggestions && suggestions.length > 0) {
|
|
|
suggestionsContainer.innerHTML = suggestions.map(item =>
|
|
|
`<div class="search-suggestion-item" data-value="${item.title}">${item.title}</div>`
|
|
|
).join('');
|
|
|
|
|
|
// 绑定建议项点击事件
|
|
|
suggestionsContainer.querySelectorAll('.search-suggestion-item').forEach(item => {
|
|
|
item.addEventListener('click', function() {
|
|
|
searchInput.value = this.dataset.value;
|
|
|
hideSuggestions();
|
|
|
searchForm.submit();
|
|
|
});
|
|
|
});
|
|
|
|
|
|
suggestionsContainer.classList.add('show');
|
|
|
} else {
|
|
|
hideSuggestions();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 隐藏搜索建议
|
|
|
function hideSuggestions() {
|
|
|
const suggestionsContainer = document.querySelector('.search-suggestions');
|
|
|
if (suggestionsContainer) {
|
|
|
suggestionsContainer.classList.remove('show');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 初始化GSAP动画
|
|
|
function initGSAPAnimations() {
|
|
|
// 注册ScrollTrigger插件（如果可用）
|
|
|
if (typeof ScrollTrigger !== 'undefined') {
|
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
}
|
|
|
|
|
|
// 搜索按钮悬停动画
|
|
|
searchToggle.addEventListener('mouseenter', function() {
|
|
|
gsap.to(this.querySelector('.search-icon'), {
|
|
|
rotation: 90,
|
|
|
scale: 1.1,
|
|
|
duration: 0.3,
|
|
|
ease: "back.out(1.7)"
|
|
|
});
|
|
|
});
|
|
|
|
|
|
searchToggle.addEventListener('mouseleave', function() {
|
|
|
gsap.to(this.querySelector('.search-icon'), {
|
|
|
rotation: 0,
|
|
|
scale: 1,
|
|
|
duration: 0.3,
|
|
|
ease: "back.out(1.7)"
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 自定义搜索框打开动画
|
|
|
document.addEventListener('searchOpened', function() {
|
|
|
const searchBox = document.querySelector('.search-box');
|
|
|
const searchInputWrapper = document.querySelector('.search-input-wrapper');
|
|
|
const searchSubmit = document.querySelector('.search-submit');
|
|
|
|
|
|
// 重置初始状态
|
|
|
gsap.set([searchBox, searchInputWrapper, searchSubmit], {
|
|
|
opacity: 0,
|
|
|
y: 30,
|
|
|
scale: 0.9
|
|
|
});
|
|
|
|
|
|
// 创建时间线动画
|
|
|
const tl = gsap.timeline();
|
|
|
|
|
|
tl.to(searchBox, {
|
|
|
opacity: 1,
|
|
|
y: 0,
|
|
|
scale: 1,
|
|
|
duration: 0.4,
|
|
|
ease: "back.out(1.7)"
|
|
|
})
|
|
|
.to(searchInputWrapper, {
|
|
|
opacity: 1,
|
|
|
y: 0,
|
|
|
scale: 1,
|
|
|
duration: 0.3,
|
|
|
ease: "power2.out"
|
|
|
}, "-=0.2")
|
|
|
.to(searchSubmit, {
|
|
|
opacity: 1,
|
|
|
y: 0,
|
|
|
scale: 1,
|
|
|
duration: 0.3,
|
|
|
ease: "power2.out"
|
|
|
}, "-=0.1");
|
|
|
});
|
|
|
}
|
|
|
|
|
|
// 工具函数：防抖
|
|
|
function debounce(func, wait) {
|
|
|
let timeout;
|
|
|
return function executedFunction(...args) {
|
|
|
const later = () => {
|
|
|
clearTimeout(timeout);
|
|
|
func(...args);
|
|
|
};
|
|
|
clearTimeout(timeout);
|
|
|
timeout = setTimeout(later, wait);
|
|
|
};
|
|
|
}
|
|
|
|
|
|
// 工具函数：节流
|
|
|
function throttle(func, limit) {
|
|
|
let inThrottle;
|
|
|
return function() {
|
|
|
const args = arguments;
|
|
|
const context = this;
|
|
|
if (!inThrottle) {
|
|
|
func.apply(context, args);
|
|
|
inThrottle = true;
|
|
|
setTimeout(() => inThrottle = false, limit);
|
|
|
}
|
|
|
};
|
|
|
}
|
|
|
|
|
|
// 页面加载完成后初始化
|
|
|
if (document.readyState === 'loading') {
|
|
|
document.addEventListener('DOMContentLoaded', initSearch);
|
|
|
} else {
|
|
|
initSearch();
|
|
|
}
|
|
|
|
|
|
// 导出到全局（用于调试）
|
|
|
window.ThemeSearch = {
|
|
|
open: openSearch,
|
|
|
close: closeSearch,
|
|
|
toggle: function() {
|
|
|
if (searchOverlay && searchOverlay.classList.contains('active')) {
|
|
|
closeSearch();
|
|
|
} else {
|
|
|
openSearch();
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
})(); |
