HTML代码怎么实现搜索功能_HTML代码搜索框功能实现与数据处理方法

<form id="searchForm" role="search">
    <label for="searchInput" class="visually-hidden">搜索内容</label>
    <input type="search" id="searchInput" placeholder="输入关键词搜索..." autocomplete="off" aria-label="搜索框">
    <button type="submit" id="searchButton">搜索</button>
</form>

<div id="searchResults">
    <!-- 搜索结果将显示在这里 -->
</div>

// 假设这是我们的数据
const products = [
    { id: 1, name: "高级机械键盘", description: "手感极佳，青轴", category: "外设" },
    { id: 2, name: "人体工学鼠标", description: "无线静音，办公利器", category: "外设" },
    { id: 3, name: "4K显示器", description: "色彩精准，专业设计", category: "显示设备" },
    { id: 4, name: "USB-C扩展坞", description: "多功能接口，轻巧便携", category: "配件" }
];

document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('searchInput');
    const searchForm = document.getElementById('searchForm');
    const searchResultsDiv = document.getElementById('searchResults');

    // 监听表单提交事件，阻止默认刷新行为
    searchForm.addEventListener('submit', (event) => {
        event.preventDefault(); // 阻止表单默认提交，避免页面刷新
        performSearch();
    });

    // 也可以监听输入框的输入事件，实现实时搜索
    searchInput.addEventListener('input', () => {
        // 我个人觉得，实时搜索在数据量小的时候体验很好，但数据量大就得考虑性能了
        // 甚至可以加一个防抖（debounce）来优化
        performSearch();
    });

    function performSearch() {
        const query = searchInput.value.toLowerCase().trim();
        searchResultsDiv.innerHTML = ''; // 清空之前的搜索结果

        if (query === '') {
            // 如果搜索框为空，可以显示所有产品或提示用户输入
            // 我觉得直接清空结果，或者显示一些热门推荐也不错
            searchResultsDiv.innerHTML = '<p>请输入关键词进行搜索。</p>';
            return;
        }

        const filteredProducts = products.filter(product =>
            product.name.toLowerCase().includes(query) ||
            product.description.toLowerCase().includes(query) ||
            product.category.toLowerCase().includes(query)
        );

        if (filteredProducts.length > 0) {
            filteredProducts.forEach(product => {
                const productElement = document.createElement('div');
                productElement.classList.add('search-result-item');
                productElement.innerHTML = `
                    <h3>${product.name}</h3>
                    <p>${product.description}</p>
                    <span>分类: ${product.category}</span>
                `;
                searchResultsDiv.appendChild(productElement);
            });
        } else {
            searchResultsDiv.innerHTML = '<p>没有找到相关结果。</p>';
        }
    }

    // 页面加载时可以先显示所有产品，或者什么都不显示
    // 个人偏好是先不显示，让用户主动搜索
    // 或者可以有一个“热门商品”区域，作为初始内容
});

// 后端搜索的JavaScript大致框架
// ... (HTML和事件监听部分与前端过滤类似) ...

    async function performBackendSearch() {
        const query = searchInput.value.toLowerCase().trim();
        searchResultsDiv.innerHTML = ''; // 清空结果

        if (query === '') {
            searchResultsDiv.innerHTML = '<p>请输入关键词进行搜索。</p>';
            return;
        }

        searchResultsDiv.innerHTML = '<p>正在搜索中...</p>'; // 提供加载反馈，这很重要！

        try {
            // 假设后端API是 /api/search?q=关键词
            const response = await fetch(`/api/search?q=${encodeURIComponent(query)}`);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const data = await response.json(); // 后端返回的数据通常是JSON格式

            if (data && data.results && data.results.length > 0) {
                searchResultsDiv.innerHTML = ''; // 清空加载提示
                data.results.forEach(item => {
                    const resultElement = document.createElement('div');
                    resultElement.classList.add('search-result-item');
                    // 根据后端返回的数据结构来渲染
                    resultElement.innerHTML = `
                        <h3>${item.title}</h3>
                        <p>${item.snippet}</p>
                        <a href="${item.url}">查看详情</a>
                    `;
                    searchResultsDiv.appendChild(resultElement);
                });
            } else {
                searchResultsDiv.innerHTML = '<p>没有找到相关结果。</p>';
            }
        } catch (error) {
            console.error('搜索失败:', error);
            searchResultsDiv.innerHTML = '<p>搜索过程中出现错误，请稍后再试。</p>';
        }
    }

    // 将事件监听器中的 performSearch() 替换为 performBackendSearch()
    searchForm.addEventListener('submit', (event) => {
        event.preventDefault();
        performBackendSearch();
    });

    searchInput.addEventListener('input', () => {
        // 后端搜索通常不建议实时触发，因为会给服务器带来压力
        // 至少要加防抖，或者只在用户点击搜索按钮时触发
        // 但如果后端性能足够强，或者有缓存，实时搜索也不是不行，就看具体场景了
        // performBackendSearch(); // 谨慎使用实时触发
    });