百度搜索 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			div{
				margin:200px auto;
				width: 500px;
			}
			body{
				background: #ccc;
			}
			input{
				height:38px;
				outline: none;
				width: 300px;
				font: 20px/30px "微软雅黑";
				text-indent: 10px;
			}
			#btn{
				width: 100px;
				height:42px;
				text-indent: 0px;
			}
			ul{
				width:300px;
			}
			li{
				list-style: none;
				line-height: 26px;
				padding-left:10px;
			}
			li:hover{
				background: #fff;
			}
			a{
				text-decoration: none;
				color:black;
			}
		</style>
		
		
	</head>
	<body>
		<div>
			<input type="text" id="search" />
			<input type="button" id="btn" value="百度一下" />
			<ul id="box">
				<!--<li><a href="">aaa</a></li>-->
			</ul>
		</div>
	</body>
</html>
<script>
	/*
	* jsonp格式接口：
	接口路径：   https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+txt+"&cb=fn
	wd 参 数值为用户搜索的数据值
	cb 为callback回调函数
	*/
	function $(id){
		return document.getElementById(id);
	}
	
	$("search").onkeyup = function(){
		var sp = document.createElement("script");
		sp.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+this.value+"&cb=fn";
		document.body.appendChild(sp);
	}
	function fn(msg){
		console.log(msg.s);
		var arr = msg.s; //请求的数据
		var str = "";
		for(var i = 0 ; i < arr.length ; i++){
			str += "<li><a href='https://www.baidu.com/s?wd="+arr[i]+"'>"+arr[i]+"</a></li>";
		}
		$("box").innerHTML = str;
	}
</script>

　　

posted @ 2019-08-11 17:16  Yi只猴  阅读(150)  评论(0)    收藏  举报