当前发送一个 Get 请求:http://suggestion.baidu.com/su?wd=wq&p=3&cb=window.bdsug.sug&t=1324271669786
注意 wd:搜索关键字
cb:callback 回调函数
那么百度将返回一个如下的 json 数据:
window.bdsug.sug({q:"wq",p:true,s:["wqvga","wqi","wqsg_umd","wqynyl","wqi下载","wqrc","wqnmlgb","wqvga分辨率","吴奇隆","吾栖之肤"]});
其实最复杂的是如何在客户端展示这些数据,需要用到 css 和 js。
正好园子里有朋友做了,感谢!
怎么样把百度搜索引入自己的网站JS实现(附源代码) - 苏飞 - 博客园
主要代码:
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>调用百度的“搜索建议”</title> <link href="js/StyleSheet.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="js/Jscript2.js" type="text/javascript"></script> </head> <body> <input style="width: 500px;" url="true" id="Text1" type="text" /> <br /> <input style="width: 500px;" id="Text2" type="text" /> <div style="display: none; position: absolute;" id="allSitesBoxHdl" class="classlist" οnmοuseοver="this.style.display='block'" οnmοuseοut="this.style.display='none'"> <ul id="allSitesBoxContent"> </ul> </div> <script type="text/javascript"> Init(); </script> <!-- 原理:http://suggestion.baidu.com/su?wd=wq&p=3&cb=window.bdsug.sug&t=1324271669786 --> <!-- 那么百度返回:window.bdsug.sug({q:"wq",p:true,s:["wqvga","wqi","wqsg_umd","wqynyl","wqi下载","wqrc","wqnmlgb","wqvga分辨率","吴奇隆","吾栖之肤"]}); --> </body> </html>
StyleSheet.css
#allSitesBoxHdl.classlist { position: absolute; background-color: #F5FBFF; width: 256px; border: 1px solid #C9E4F4; top: 28px; left: 0; text-align: left; font-size: 14px; line-height: 30px; padding: 1px; } #allSitesBoxHdl.classlist li { display: inline; } #allSitesBoxHdl.classlist li.lis a { text-decoration: none; height: 30px; width: 210px; float: left; padding-left: 8px; color: #666; } #allSitesBoxHdl.classlist li.lis a:hover { color: #016493; background-color: #edf6fb; } #allSitesBoxHdl.classlist li.lis a:active { color: #016493; background-color: #edf6fb; } #allSitesBoxHdl.classlist li.lis input { cursor: pointer; color: #FF6600; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; height: 22px; margin: 4px; line-height: 22px; float: right; background: #fff; } .wena { color: #666; font-size: 12px; height: 30px; line-height: 30px; width: 250px; float: left; }
Jscript2.js