利用ajax来造一个简单的搜索功能

小粗腿Cc

已于 2022-03-28 09:32:45 修改

阅读量1.9k

点赞数 1

文章标签：前端 vscode javascript html5

于 2022-03-27 15:52:36 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45249263/article/details/123774813

版权

本文主要是简单介绍了如何用Ajax来构造一个简陋的搜索功能

通过ajax来实时获取百度搜索框的内容

敲代码前的必须步骤：

①先到百度拿到搜索框的数据（任意网站的搜索框，在此以百度为例），如下图

②右击图中的sugrec?...文件（每个网站的文件名都会不一样的），并复制该链接，如下图：

接下来就是代码，如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山寨百度</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        input {
            width: 580px;
            padding-left: 20px;
            height: 40px;
            margin: 2px auto 0;
            display: block;
        }

        input:hover {
            outline: thick double #32a1ce;
        }

        ul {
            width: 600px;
            margin: 0 auto;
            border: 1px solid #333;
            display: none;
        }

        li {
            margin: 5px 20px;
        }

        li:hover {
            background-color: #32a1ce;
        }
    </style>
</head>

<body>
    <!-- 造假搜索框 -->
    <input type="text" id="UserInp">
    <!-- 用来展示所搜关键词的相关内容 -->
    <ul id="inpList"></ul>

    <script>
        // 编写回调函数的代码，即将获取到的数据显示出来
        const onDataGot = data => {
            // console.log(data);
            const {g: list} = data
            if (UserInp.value) {
                inpList.innerHTML = list.map(
                    obj => `<li>${obj.q}</li>`
                ).join("")
                console.log(list);
                inpList.style.display = "block"
                // 卸磨杀驴（清除用完的script标签）
                document.querySelectorAll(".ScJsonp").forEach(item => item.remove())
            }
        }
    </script>

    <script>
        const UserInp = document.querySelector("#UserInp")
        const inpList = document.querySelector("#inpList")

        // 利用事件委托来监听输入框，实时根据输入内容来获取数据，其中有个重点是script脚本标签
        UserInp.addEventListener(
            "input",
            function (e) {
                console.log(UserInp.value);

                const sc = document.createElement("script")
                sc.className = "ScJsonp"
                sc.src =
                    `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=34429,35104,35761,34584,35871,35246,35949,35957,35984,35325,26350,22160&wd=${UserInp.value}&req=2&bs=asdfgh&pbs=asdfgh&csor=2&pwd=a&cb=onDataGot&_=1646119284640`
                document.body.appendChild(sc)
            }
        )
    </script>
</body>

</html>