模拟百度搜索

不念不忘少年蓝@ 2023-07-13 15:16 5阅读 0赞

> 通过jsonp的跨域，实现对百度搜索接口的调用，最终实现模拟搜索的功能。

![20200313093834129.gif][]

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            .block{
                width: 700px;
                height: 50px;
                border: 1px solid black;
                margin: 100px auto;
            }
            .res{
                width: 570px;
                height: 50px;
                border-style: none;
                outline: none;
                box-sizing: border-box;
                font-size: 20px;
                float: left;
                padding-left: 20px;
            }
            .btn{
                display: block;
                width: 130px;
                height: 50px;
                background-color: #2ac9ff;
                text-align: center;
                line-height: 50px;
                color: white;
                font-size: 20px;
                float: left;
                cursor: pointer;
            }
            .btn:hover{
                background-color: #2eaaff;
            }
            .menu{
                margin: 0;
                padding: 0;
                border: 1px solid silver;
                width: 570px;
                margin-left: -1px;
            }
            .menu>li{
                list-style: none;
                line-height: 30px;
                font-size: 16px;
                padding-left: 10px;
                cursor: pointer;
                font-weight: bold;
            }
            .menu>li>a{
                color: black;
                text-decoration: none;
            }
            .menu>li:hover{
                background-color: #eaeaea;
            }
        </style>
    </head>
    <body>
    <div class="block">
        <input class="res" type="text"/>
        <span class="btn">ç™¾åº¦ä¸€ä¸‹</span>
    </div>
    <script>
        var result=document.getElementsByClassName("res")[0];
        var block=document.getElementsByClassName("block")[0];
        var btn=document.getElementsByClassName("btn")[0];
        result.onkeyup=function (e){
            var value=this.value;
            var sc=document.createElement("script");
            sc.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+value+"&cb=shoData";
            document.body.appendChild(sc);
            sc.remove();
        }
        function shoData(data){
            var menu=document.getElementsByClassName("menu")[0];
            if(menu)
            {
                menu.remove();
            }
            var ul=document.createElement("ul");
            ul.className="menu";
            for(var i=0;i<data.s.length;i++)
            {
                var li=document.createElement("li");
                li.innerHTML="<a href='https://www.baidu.com/s?wd="+data.s[i]+"'>"+data.s[i]+"</a>";
                /*li.addEventListener("click",clickMenu);*/
                ul.appendChild(li);
            }
            block.appendChild(ul);
        }
        btn.onclick=function (){
            location.href="https://www.baidu.com/s?wd="+result.value;
        }
       /* function clickMenu(){
            /!*location.href="https://www.baidu.com/s?wd="+this.innerHTML;*!/
        }*/
    </script>
    </body>
    </html>

[20200313093834129.gif]: /images/20230529/1e6bfeb2ffa94a349f1dd6dfabae1ad2.png

模拟百度搜索

发表评论取消回复

还没有评论，来说两句吧...

相关阅读