<style>
/* 基础样式 */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 搜索框容器 */
.a5-search-container {
    background: transparent;
    border-radius: 32px;
    padding: 12px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 24px auto;
    max-width: 800px;
}

.a5-search-container form {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* 搜索输入框 */
.a5-search-input {
    width: 100%;
    max-width: 520px;
    height: 45px;
    line-height: 45px;
    font: 16px "Arial", "Microsoft YaHei", sans-serif;
    padding: 0 40px 0 16px;
    margin-right: 12px;
    border: 2px solid #3EAF0E;
    border-radius: 20px;
    background: #f9f9f9 url(https://a5.org.cn/favicon.ico) no-repeat right 12px center;
    background-size: 24px 24px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.a5-search-input:focus {
    border-color: #2e8b0e;
    box-shadow: 0 0 0 3px rgba(62, 175, 14, 0.15), 0 3px 8px rgba(0,0,0,0.08);
    background-color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.a5-search-input::placeholder {
    color: #aaa;
    opacity: 1;
}

/* 搜索按钮 */
.a5-search-button {
    height: 45px;
    min-width: 120px;
    line-height: 45px;
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #3FB30E 0%, #2e8b0e 100%);
    font-weight: bold;
    font-size: 16px;
    border-radius: 20px;
    padding: 0 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(63, 179, 14, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.a5-search-button:hover {
    background: linear-gradient(135deg, #2e8b0e 0%, #3FB30E 100%);
    box-shadow: 0 4px 12px rgba(63, 179, 14, 0.25);
    transform: translateY(-1px);
}

.a5-search-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(63, 179, 14, 0.2);
}

/* 热门搜索标签 */
.a5-hot-tags {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.a5-hot-tags-title {
    font-size: 14px;
    color: #666;
    line-height: 28px;
    margin-right: 4px;
}

.a5-hot-tag {
    display: inline-block;
    padding: 4px 12px;
    background-color: #f0f0f0;
    border-radius: 14px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
}

.a5-hot-tag:hover {
    background-color: #e6f9e6;
    color: #2e8b0e;
    transform: translateY(-1px);
}

.a5-hot-tag:active {
    transform: translateY(0);
}

/* 移动端适配 */
@media (max-width: 600px) {
    .a5-search-container {
        padding: 8px;
        border-radius: 0;
    }
    
    .a5-search-input {
        max-width: 100%;
        font-size: 14px;
        padding: 0 32px 0 12px;
        height: 38px;
        margin-right: 8px;
        background-size: 20px 20px;
        background-position: right 8px center;
    }
    
    .a5-search-button {
        min-width: 60px;
        font-size: 14px;
        padding: 0 12px;
        height: 38px;
    }
    
    .a5-hot-tags {
        margin-top: 12px;
        gap: 6px;
    }
    
    .a5-hot-tags-title {
        font-size: 12px;
        line-height: 24px;
    }
    
    .a5-hot-tag {
        padding: 3px 10px;
        font-size: 12px;
        border-radius: 12px;
    }
}

/* 搜索建议样式 */
.a5-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    z-index: 999;
    display: none;
}

.a5-search-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.a5-search-suggestions li {
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f0f0f0;
}

.a5-search-suggestions li:last-child {
    border-bottom: none;
}

.a5-search-suggestions li:hover {
    background: #f9f9f9;
}

.a5-search-suggestions li.active {
    background: #e6f9e6;
}
</style>

<div class="a5-search-container">
    <form method="get" action="https://a5.org.cn/" class="relative">
        <input type="text" 
               name="s" 
               class="a5-search-input" 
               placeholder="搜索精品资源" 
               autocomplete="off">
               
        <button type="submit" class="a5-search-button">
            <span>A5搜索</span>
            <i class="fa fa-search ml-2"></i>
        </button>
        
        <!-- 搜索建议容器 -->
        <div class="a5-search-suggestions">
            <ul id="search-suggestions-list"></ul>
        </div>
    </form>
    
    <!-- 热门搜索标签 -->
    <div class="a5-hot-tags">
        <span class="a5-hot-tags-title">热门搜索:</span>
        <a href="#" class="a5-hot-tag" data-tag="网站模板">网站模板</a>
        <a href="#" class="a5-hot-tag" data-tag="响应式模板">响应式模板</a>
        <a href="#" class="a5-hot-tag" data-tag="WordPress插件">WordPress插件</a>
        <a href="#" class="a5-hot-tag" data-tag="JavaScript源码">JavaScript源码</a>
        <a href="#" class="a5-hot-tag" data-tag="UI设计资源">UI设计资源</a>
        <a href="#" class="a5-hot-tag" data-tag="字体下载">字体下载</a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.querySelector('.a5-search-input');
    const suggestionsContainer = document.querySelector('.a5-search-suggestions');
    const suggestionsList = document.getElementById('search-suggestions-list');
    const hotTags = document.querySelectorAll('.a5-hot-tag');
    
    // 模拟搜索建议数据
    const mockSuggestions = [
        "网站模板", "响应式模板", "WordPress插件", "JavaScript源码", 
        "CSS样式", "HTML5动画", "UI设计资源", "平面设计素材", 
        "字体下载", "图标库", "SVG素材", "摄影图片"
    ];
    
    // 显示搜索建议
    searchInput.addEventListener('input', function() {
        const query = this.value.trim();
        
        if (query.length < 2) {
            suggestionsContainer.style.display = 'none';
            return;
        }
        
        // 过滤匹配的建议
        const filteredSuggestions = mockSuggestions.filter(suggestion => 
            suggestion.toLowerCase().includes(query.toLowerCase())
        );
        
        if (filteredSuggestions.length > 0) {
            // 清空并添加建议项
            suggestionsList.innerHTML = '';
            
            filteredSuggestions.forEach(suggestion => {
                const li = document.createElement('li');
                li.textContent = suggestion;
                
                li.addEventListener('click', function() {
                    searchInput.value = suggestion;
                    suggestionsContainer.style.display = 'none';
                    searchInput.form.submit();
                });
                
                suggestionsList.appendChild(li);
            });
            
            suggestionsContainer.style.display = 'block';
        } else {
            suggestionsContainer.style.display = 'none';
        }
    });
    
    // 点击其他区域关闭建议
    document.addEventListener('click', function(e) {
        if (!searchInput.contains(e.target) && !suggestionsContainer.contains(e.target)) {
            suggestionsContainer.style.display = 'none';
        }
    });
    
    // 键盘导航
    searchInput.addEventListener('keydown', function(e) {
        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
            e.preventDefault();
            
            const suggestions = suggestionsList.querySelectorAll('li');
            if (suggestions.length === 0) return;
            
            let activeSuggestion = suggestionsList.querySelector('li.active');
            let index = -1;
            
            if (activeSuggestion) {
                index = Array.from(suggestions).indexOf(activeSuggestion);
                activeSuggestion.classList.remove('active');
            }
            
            if (e.key === 'ArrowDown') {
                index = (index + 1) % suggestions.length;
            } else {
                index = (index - 1 + suggestions.length) % suggestions.length;
            }
            
            suggestions[index].classList.add('active');
            searchInput.value = suggestions[index].textContent;
        } else if (e.key === 'Enter') {
            const activeSuggestion = suggestionsList.querySelector('li.active');
            if (activeSuggestion) {
                e.preventDefault();
                activeSuggestion.click();
            }
        }
    });
    
    // 热门标签点击事件
    hotTags.forEach(tag => {
        tag.addEventListener('click', function(e) {
            e.preventDefault();
            const tagValue = this.getAttribute('data-tag');
            searchInput.value = tagValue;
            searchInput.form.submit();
        });
    });
});
</script>