Javascript如何解决？

很多网站均提供一个文本框和一个按钮，以此让用户输入搜索关键字并提交请求。本实验以此为参考设置搜索主页，增加单选按钮可以让用户输入关键词后可以去不同的网站搜索。
本实验分两部分进行：1. 数据存储不同搜索网站去搜索相关数据，需要网址、关键字名称和相关网站标识等数据，将相关数据放入data变量中，作为网页界面显示的初始数据来源。2. 搜索首页的设计与实现将搜集到的网站搜索方式用一组单选按钮显现出来让用户选择，然后可以提供文本输入框和按钮让用户提交请求。

放到gpt跑一下会怎么样


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p><input id="keywords" placeholder="请输入关键字"><input type="button" value="搜索" onclick="search()"></p>
<p>
    <input type="radio" name="t" value="baidu" class="search-type" checked>百度
    <input type="radio" name="t" value="sogou" class="search-type">搜狗
    <input type="radio" name="t" value="so360" class="search-type">360
</p>
<script>
    var data = {
        "baidu": "https://www.baidu.com/s?ie=UTF-8&wd=",
        "sogou": "https://www.sogou.com/web?query=",
        "so360": "https://www.so.com/s?q="
    }

    function search() {
        var inputs = document.getElementsByClassName("search-type")
        var keywords = document.getElementById("keywords").value
        for (var i = 0; i < inputs.length; i++) {
            if (inputs[i].checked) {
                var type = inputs[i].value
                window.open(data[type] + keywords, "_blank");
                break;
            }
        }
    }
</script>
</body>
</html>

运行效果

以下回答由chatgpt基于相关博客总结生成:
我可以给出实现一个搜索主页的解决方案，具体步骤如下：
1.设计搜索主页的UI界面，可以利用HTML和CSS进行布局和美化。
2.利用JavaScript编写搜索功能的实现方法，主要包括以下几个步骤：
①监听搜索按钮的点击事件，获取用户输入的搜索关键字。
②根据不同的搜索引擎和网站，构建不同的搜索URL地址，包括关键字和具体参数等信息。
③利用XMLHttpRequest对象实现Ajax异步请求，将搜索URL地址发送给服务器，获取服务器返回的数据。
④对返回的数据进行解析和处理，显示在搜索结果页面上，包括搜索结果列表、图片、链接、描述等信息。
⑤实现单选按钮的选择功能，根据用户的选择来切换不同的搜索引擎和网站。
3.对数据进行存储，可以选择使用localStorage（本地存储对象）或IndexedDB（数据库对象）等技术，将搜索记录、用户习惯、搜索设置等信息保存在本地客户端。
具体的代码实现比较复杂，需要较多的JavaScript和AJAX编程知识和技能，需要一定的实战经验和团队合作。如果需要的话，可以考虑参考一些开源的搜索引擎项目，如Elasticsearch、Apache Solr等，或者利用现有的搜索API和SDK，如Google Search API、Bing Search API、Sogou Search API等，来快速构建搜索功能。