当前位置：首页 > 行业动态 > 正文

html如何实现站内搜索

admin
行业动态
2024-04-01
1

要在HTML中实现站内搜索，可以使用以下步骤：

1、创建搜索表单

2、使用JavaScript或服务器端脚本处理搜索请求

3、在页面上显示搜索结果

下面是一个简单的示例，展示了如何使用HTML和JavaScript实现站内搜索。

创建一个HTML文件，包含一个搜索表单和一个用于显示搜索结果的表格：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF8">
    <title>站内搜索示例</title>
    <style>
        table {
            width: 100%;
            bordercollapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            textalign: left;
        }
        th {
            backgroundcolor: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>站内搜索示例</h1>
    <form id="searchForm">
        <label for="searchInput">搜索关键词：</label>
        <input type="text" id="searchInput" name="searchInput">
        <button type="submit">搜索</button>
    </form>
    <table id="resultsTable">
        <thead>
            <tr>
                <th>标题</th>
                <th>内容</th>
            </tr>
        </thead>
        <tbody id="resultsBody">
        </tbody>
    </table>
    <script>
        // 在这里添加JavaScript代码处理搜索请求和显示结果
    </script>
</body>
</html>

接下来，使用JavaScript处理搜索请求并显示结果，在这个示例中，我们将使用一个简单的数组来存储页面上的数据，实际应用中，您可能需要从数据库或其他数据源获取数据。

// 示例数据
const data = [
    { title: '文章1', content: '这是文章1的内容' },
    { title: '文章2', content: '这是文章2的内容' },
    { title: '文章3', content: '这是文章3的内容' },
];
// 获取DOM元素
const searchForm = document.getElementById('searchForm');
const searchInput = document.getElementById('searchInput');
const resultsBody = document.getElementById('resultsBody');
// 监听搜索表单的提交事件
searchForm.addEventListener('submit', function (event) {
    event.preventDefault(); // 阻止表单默认提交行为
    const keyword = searchInput.value.trim(); // 获取搜索关键词
    if (!keyword) return; // 如果关键词为空，不进行搜索
    // 根据关键词搜索数据
    const results = data.filter(item => item.title.includes(keyword) || item.content.includes(keyword));
    // 清空表格内容
    resultsBody.innerHTML = '';
    // 将搜索结果显示在表格中
    results.forEach(result => {
        const row = document.createElement('tr');
        const titleCell = document.createElement('td');
        const contentCell = document.createElement('td');
        titleCell.textContent = result.title;
        contentCell.textContent = result.content;
        row.appendChild(titleCell);
        row.appendChild(contentCell);
        resultsBody.appendChild(row);
    });
});

将上述JavaScript代码添加到<script>标签中，即可实现站内搜索功能，当用户在搜索框中输入关键词并点击搜索按钮时，页面会显示与关键词相关的搜索结果。