如何实现仅检索站内页面的网站搜索栏功能？

根据你已完成的搜索栏基础代码，以下是两种无需调用谷歌搜索的站内检索实现方案，适配不同类型的站点：

方案一：纯前端静态站内搜索（适合静态生成站点，如Hexo、Jekyll） #

1. 调整现有HTML结构 #

添加搜索结果展示区域，并修改表单提交逻辑：

<div class="search-head">
        <form class="search-bar" id="site-search-form">
            <input class="search-barinpt" type="text" id="search-input" placeholder="Search Here"/> 
            <button type="submit"><img class="search-img" src="/images-for-website/search-icon.png"></button>             
        </form>
        <!-- 搜索结果展示容器 -->
        <div id="search-results" class="search-results"></div>
</div>

2. 编写搜索逻辑JavaScript #

方式A：预定义页面索引数据

如果站点页面数量不多，可直接在JS中定义页面索引：

// 存储站内可检索页面的索引数据，包含标题、链接、内容摘要
const searchIndex = [
    { title: "首页", url: "/", content: "网站首页的核心内容介绍..." },
    { title: "教程页面", url: "/tutorial", content: "本站提供的前端开发教程内容..." },
    // 补充其他页面的索引信息
];

const searchForm = document.getElementById('site-search-form');
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

// 监听表单提交事件
searchForm.addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认跳转
    const query = searchInput.value.trim().toLowerCase();
    
    if (!query) {
        searchResults.innerHTML = '<p>请输入搜索关键词</p>';
        return;
    }

    // 筛选匹配的页面
    const matchedResults = searchIndex.filter(item => {
        return item.title.toLowerCase().includes(query) || 
               item.content.toLowerCase().includes(query);
    });

    // 渲染搜索结果
    if (matchedResults.length === 0) {
        searchResults.innerHTML = '<p>未找到匹配的内容</p>';
    } else {
        let resultHtml = '<ul>';
        matchedResults.forEach(item => {
            resultHtml += `<li><a href="${item.url}">${item.title}</a><p>${item.content.substring(0, 100)}...</p></li>`;
        });
        resultHtml += '</ul>';
        searchResults.innerHTML = resultHtml;
    }
});

方式B：自动生成索引文件（适合页面较多的静态站点）

可以通过站点构建工具（如Gulp、Webpack）在编译时自动抓取所有页面内容，生成search-index.json文件，再通过JS加载：

// 加载预先生成的索引文件
fetch('/search-index.json')
    .then(response => response.json())
    .then(data => {
        window.searchIndex = data;
    });

方案二：后端驱动的站内搜索（适合动态站点，如PHP、Node.js） #

1. 修改表单提交地址 #

将表单的action指向后端处理脚本，指定请求方式为GET：

<div class="search-head">
        <form class="search-bar" action="/search.php" method="GET">
            <input class="search-barinpt" type="text" name="query" placeholder="Search Here"/> 
            <button type="submit"><img class="search-img" src="/images-for-website/search-icon.png"></button>             
        </form>
</div>

2. 编写后端处理逻辑（以PHP为例） #

假设站点内容存储在数据库的pages表中，包含title、url、content字段：

<?php
// search.php
$searchQuery = isset($_GET['query']) ? trim($_GET['query']) : '';
$results = [];

if ($searchQuery) {
    // 数据库连接配置（根据实际情况修改）
    $dbConn = mysqli_connect('localhost', '数据库用户名', '数据库密码', '数据库名');
    if (!$dbConn) {
        die('数据库连接失败');
    }

    // 使用预处理语句防止SQL注入
    $stmt = mysqli_prepare($dbConn, "SELECT title, url, content FROM pages WHERE title LIKE ? OR content LIKE ?");
    $likeKeyword = "%$searchQuery%";
    mysqli_stmt_bind_param($stmt, "ss", $likeKeyword, $likeKeyword);
    mysqli_stmt_execute($stmt);
    $queryResult = mysqli_stmt_get_result($stmt);

    while ($row = mysqli_fetch_assoc($queryResult)) {
        $results[] = $row;
    }

    mysqli_stmt_close($stmt);
    mysqli_close($dbConn);
}
?>

<!-- 搜索结果页面渲染 -->
<!DOCTYPE html>
<html>
<head>
    <title>搜索结果</title>
    <!-- 引入站点全局样式 -->
</head>
<body>
    <div class="search-head">
        <form class="search-bar" action="/search.php" method="GET">
            <input class="search-barinpt" type="text" name="query" value="<?php echo htmlspecialchars($searchQuery); ?>" placeholder="Search Here"/> 
            <button type="submit"><img class="search-img" src="/images-for-website/search-icon.png"></button>             
        </form>
    </div>

    <div class="search-results">
        <?php if (empty($results)): ?>
            <p>未找到匹配的内容</p>
        <?php else: ?>
            <ul>
                <?php foreach ($results as $item): ?>
                    <li>
                        <a href="<?php echo htmlspecialchars($item['url']); ?>"><?php echo htmlspecialchars($item['title']); ?></a>
                        <p><?php echo substr(htmlspecialchars($item['content']), 0, 100); ?>...</p>
                    </li>
                <?php endforeach; ?>
            </ul>
        <?php endif; ?>
    </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者kayla