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

最新推荐文章于 2024-05-30 19:44:18 发布

weixin_34144848

最新推荐文章于 2024-05-30 19:44:18 发布

阅读量3.2k

点赞数

文章标签： python javascript swift ViewUI

原文链接：https://segmentfault.com/a/1190000013309799

版权

一、原理

百度使用的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是之前写的，注释比较少，春节开工后写详细的注释，每一篇文章都会维护起来的，现在先实现功能，逻辑比较简单大家一看就懂。新年快乐。

weixin_34144848

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
在自己的项目里调用百度接口，实现百度搜索

一、原理百度使用的jsonp接口，按照jsonp的方法即可实现百度搜索的功能。二、代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>...
复制链接

扫一扫