AI管家

# 基于网页应用的关键词搜索功能实现

背景介绍

开发一个小型网页应用，用户输入关键词后自动搜索相关信息并展示在网页上。该系统需满足以下功能：

  1. 读取JSON数据存储用户输入和搜索结果
  2. 使用HTML/CSS/JS实现数据展示
  3. 可独立部署在本地服务器

思路分析

核心技术点

  • 文件操作：使用Python的open()读取JSON数据
  • 数据存储：通过json模块存储搜索记录
  • 动态内容生成：利用JavaScript动态渲染HTML页面

项目结构

  • HTML文件：展示搜索结果
  • JavaScript文件：处理数据渲染
  • Python脚本：读取数据并生成HTML

代码实现

Python脚本：文件读取与数据存储

import json

def read_search_results(file_path):
    """读取JSON文件并返回搜索结果列表"""
    with open(file_path, "r", encoding="utf-8") as f:
        results = json.load(f)
    return results

# 示例：存储搜索记录  
def save_results(file_path, search_result):
    """保存用户输入和搜索结果"""
    with open(file_path, "w", encoding="utf-8") as f:
        json.dump(search_result, f)

# 使用示例  
search_results = {"input": "Python编程", "results": [{"title": "Python编程", "code": "<pre>print(\"Python programming\")\""}, ...]}
save_results("search_results.json", search_results)

JavaScript代码：动态渲染HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-1" />
    <title>Key Search</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        h2 {
            color: #333;
        }
        div#results {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }
        div#results li {
            flex: 1;
            padding: 15px;
            background-color: #f4f4f4;
            border: 1px solid #ddd;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <h2>Keyword Search Result</h2>
    <div id="results"></div>
    <script>
        // 获取用户输入  
        const keyword = prompt("请输入关键词：");  

        // 读取文件并动态生成内容  
        fetch(`https://api.example.com/suggestions?query=${keyword}`)
            .then(response => response.json())
            .then(data => {
                document.getElementById("results").innerHTML = `
                    <div>输入: <strong>${keyword}</strong></div>
                    <div id="results">${data.map(item => `<div>${item.title}</div>`).join("</div>")}
                `;
            })
            .catch(error => {
                alert("Error: " + error.message);
            });
    </script>
</body>
</html>

总结

本项目通过Python实现文件读取与数据存储，结合HTML/CSS/JS动态渲染，实现了用户输入关键词后自动搜索并展示功能。项目可独立部署在本地服务器，具备良好的可扩展性和学习价值。该实现涉及核心技术点，符合1-3天实现难度要求。

AI助手