利用jsonp实现百度搜索联想词功能

最新推荐文章于 2021-07-12 16:22:07 发布

原创最新推荐文章于 2021-07-12 16:22:07 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

js，es6 同时被 2 个专栏收录

27 篇文章

订阅专栏

网络

4 篇文章

订阅专栏

该博客介绍如何利用jsonp技术来实现类似百度搜索的联想词功能，点击联想词可以无缝跳转到对应的搜索结果页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>jsonp仿百度搜索联想词功能</title>

	<style type="text/css" media="screen">
		*{
			padding:0px;
			margin:0px;
			list-style: none;
			text-decoration: none;
		}
		input{
			width:400px;
			height:34px;
		
		}
		ul{
			display: none;
			width:400px;
			border:1px solid #ccc;
			/*height:300px;*/
		}
		.wra{
			width:400px;
			margin:100px auto;
		}
		a{
			color:#111;
			font-size: 14px;

		}
		li{
			height: 25px;
            line-height: 25px;
		}
		li:hover{
			background-color: rgba(0,0,0,0.1);
		}

	</style>
</head>
<body>
	<div class="wra">
		 <input type="text" name="" >
		 <ul>
		 	 
		 </ul>
 	 
	</div>
	
	 <script>
	 	var oInput=document.getElementsByTagName("input")[0],
	 	     oUl=document.getElementsByTagName("ul")[0];
	 	oInput.oninput=function(){

	 			var value=this.value;
	 			var oScript=document.createElement('script');
	 			oScript.src="http://suggestion.baidu.com/su?ie=utf-action=json&wd="+value+"&cb=aa";
	 			document.body.appendChild(oScript);
	 			oScript.onload=function(){
	 		     	document.body.removeChild(oScript);//script加载完后再删除

	 			}


	 	}

	 	 function aa(data){
	 	 	// console.log(data)
	 	 	var s=data.s,
	 	 	str='';

	 	 	if(s.length>0){

	 	 		for(var i=0;i<s.length;i++){
	 	 			str+='<li><a href="http://www.baidu.com/s?wd='+s[i]+'">'+s[i]+'</a></li>';
	 	 			if(i==6){
	 	 				 
	 	 				break;
	 	 			}
	 	 		}
	 	 		 
	 	 	oUl.innerHTML=str;
	 	 	oUl.style.display='block';
	 	 	}else{
	 	 		oUl.style.display='none';
	 	 	}
	 	 	
	 	 	
	 	 }

	 </script>
</body>
</html>