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

 <!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+='
  • +s[i]+'">'+s[i]+'
  • '
    ; if(i==6){ break; } } oUl.innerHTML=str; oUl.style.display='block'; }else{ oUl.style.display='none'; } } </script> </body> </html>

    利用jsonp实现百度搜索联想词功能_第1张图片
    当然点击联想词也可以跳转到相应搜索页面
    利用jsonp实现百度搜索联想词功能_第2张图片

    你可能感兴趣的:(js,es6,网络)