在自己的项目里调用百度接口,实现百度搜索

XSxing 2019-06-26

一、原理

百度使用的jsonp接口,按照jsonp的方法即可实现百度搜索的功能。

二、代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin:0;
                padding: 0;
            }
            body{
                padding: 50px;
            }
            input{
                width: 300px;
            }
            ul{
                width: 300px;
                border: 1px solid #FF69B4;
                display: none;
            }
            li{
                list-style: none;
            }
            li a:hover{
                color: hotpink;
                
            }
        </style>
    </head>
    
    <body>
        <input type="text" id="q" />
        <ul id="ul1"></ul>
        <script type="text/javascript">
            function baidudata(data){
                var oUl=document.getElementById('ul1')
                var html='';
                if(data.s.length){
                    oUl.style.display = 'block';
                    for(var i=0;i<data.s.length;i++){
                        html+='<li><a href="https://www.baidu.com/s?&wd='+data.s[i]+'">'+data.s[i]+'</a></li>'
                    }
                    oUl.innerHTML=html;
                }else{
                    oUl.style.display='none'
                }
            }
            window.onload=function(){
                var oQ=document.getElementById('q')
                var oUl=document.getElementById('ul1')
                oQ.onkeyup=function(){
                    if(this.value !=""){
                        var oScript=document.createElement('script')    
                        oScript.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd='+this.value+'&cb=baidudata'
                        document.body.appendChild(oScript)
                    }else{
                        oUl.style.display='none'
                    }
                }
            }
        </script>
    </body>
</html>

三、总结

demo是之前写的,注释比较少,春节开工后写详细的注释,每一篇文章都会维护起来的,现在先实现功能,逻辑比较简单大家一看就懂。新年快乐。

相关推荐