首先先将百度的搜索API进行分析，主要是分析他的通过页面传进去的参数，和回调函数名，以及服务器请求成功之后返回的数据
其实网上可以查到很多分析后的免费API比如天气预报,城市搜索等自己可以试试
注意：本例中 用到两个API一个是
根据关键
字搜索的API
sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=sr&wd="+value（关键字）
另一个是点击显示对应
网页的API
https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd="+"要显示的信息";
最终实现的页面及功能如下：可以根据收入的关键字查找出对应信息，并动态绑定到页面上，并且可以点击链接到对应网页
用到的的语法有，
1：输入关键字后触发的键盘抬起事件onkeyup
2：window.location.href页面跳转
3：for each(function(){})遍历方法
4：Jq的ajax方法jsonp进行跨域请求
主要代码如下
<div class="block"> <input id="search"> <span class="btn">百度一下</span></div><script> $(function(){ $("#search").on("keyup",function () { var value = $(this).val(); //输入的关键字 $.ajax({ methods:"get", //根据关键字搜索的api url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=sr&wd="+value, dataType:"jsonp", jsonpCallback:"sr", //远程API即不同域之间jq跨域请求方式1 success:function (data){ var datalist=data.s; var ul=$("<ul></ul>"); ul.addClass("ul"); for(var i=0;i<datalist.length;i++) { $(".block").find("ul").remove(); //创建新标签并加上 var li=$("<li></li>"); li.bind("click",function(){ var tex=$(this).text(); $("#search").val(tex); $(this).parent("ul").remove(); }); li.html(datalist[i]); //点击显示对应网页的API var a=$("<a href='https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd="+datalist[i]+"'></a>"); a.append(li); ul.append(a) } $(".block").append(ul); } }) }) $(".btn").click(function(){ var mess=$("#search").val(); window.location.href='https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd='+mess; }) })</script>