javascript实现百度词头 

    <style>
        .top{
            margin: 0 300px 0 ;
            width: 500px;
            height: auto;
            border: 1px solid grey;
            border-radius: 10% 10% 3% 3%;
            border-top: none;
        }
        input{
            display: block;
            height: 30px;
            width: 500px;
            border-radius: 10px;
            margin: 50px auto 0px auto;
        }
        .top3{
            margin:0px auto;
            height: 23px;
            border-bottom: 0.01cm solid gainsboro;
            text-indent: 1em;
            font-family: 'Microsoft YaHei',Arial,sans-serif;
        }
    </style>
</head>
<body>
        <div class="top">
            <div class="top1">
                <input type="text">
            </div>
            <div class="top2"></div>
        </div>
        //导入jquery
    <script src="/js/jquery-3.6.4.min.js"></script>
    <script>
    //绑定键盘抬起事件
        $("input").keyup(function(key){
            let text=$(this).val().trim();
            console.log("fsdfsd");
            //阿贾克斯:AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
            $.ajax({
            //请求地址
                url:`https://www.baidu.com/sugrec?prod=pc&wd=${text}`,
                //请求方式
                method:"get",
//请求时常
                timeout:100,
//设置异部访问
                dataType:"jsonp",
//请求成功执行函数
                success:function(res){

                    console.log("fff");
//清楚上次请求数据
                    $(".top2").empty()
//遍历res.g并将结果传给函数参数
                    res.g.forEach(function(tiem){
//为.top2添加元素 ${}可加入变量
                        $(".top2").append(`
                            <div class="top3">
                                ${tiem.q}
                            </div>
                    `)
                    });
                },
            })
        })
    </script>
posted @ 2023-04-24 10:19  向众神祈祷  阅读(17)  评论(0)    收藏  举报