JavaScript如何解决

很多网站均提供一个文本框和一个按钮，以此让用户输入搜索关键字并提交请求。本实验以此为参考设置搜索主页，增加单选按钮可以让用户输入关键词后可以去不同的网站搜索。本实验分两部分进行：

数据存储不同搜索网站去搜索相关数据，需要网址、关键字名称和相关网站标识等数据，将相关数据放入data变量中，作为网页界面显示的初始数据来源。
搜索首页的设计与实现将搜集到的网站搜索方式用一组单选按钮显现出来让用户选择，然后可以提供文本输入框和按钮让用户提交请求。

以下是一个简单的示例代码，演示了如何实现这个功能：答案参考Chatgpt解答

HTML部分（index.html）：

<!DOCTYPE html>
<html>
<head>
    <title>搜索主页</title>
</head>
<body>
    <h1>搜索主页</h1>

    <form id="searchForm">
        <input type="text" id="keyword" placeholder="请输入关键字">
        <br><br>
        <label>
            <input type="radio" name="site" value="google"> Google
        </label>
        <br>
        <label>
            <input type="radio" name="site" value="baidu"> 百度
        </label>
        <br>
        <label>
            <input type="radio" name="site" value="bing"> Bing
        </label>
        <br><br>
        <input type="submit" value="搜索">
    </form>

    <div id="result"></div>

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）：

document.getElementById("searchForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表单提交的默认行为

    var keyword = document.getElementById("keyword").value;
    var site = document.querySelector("input[name='site']:checked").value;

    search(keyword, site);
});

function search(keyword, site) {
    var data = {
        google: {
            url: "https://www.google.com/search",
            paramName: "q"
        },
        baidu: {
            url: "https://www.baidu.com/s",
            paramName: "wd"
        },
        bing: {
            url: "https://www.bing.com/search",
            paramName: "q"
        }
    };

    var searchUrl = data[site].url;
    var paramName = data[site].paramName;

    var encodedKeyword = encodeURIComponent(keyword);
    var searchQuery = searchUrl + "?" + paramName + "=" + encodedKeyword;

    document.getElementById("result").innerHTML = "正在搜索，请稍候...";
    window.location.href = searchQuery; // 在当前窗口打开搜索结果页面
}

在上述代码中，我们创建了一个表单，包含一个文本输入框和一组单选按钮，以及一个提交按钮。当用户点击提交按钮时，JavaScript代码会获取用户输入的关键字和选中的搜索网站，然后根据选择的搜索网站生成相应的搜索URL，并将用户重定向到搜索结果页面。

请注意，上述代码仅提供了一个简单的示例，您可以根据需要进行修改和扩展，以适应实际需求。