JSONP跨域引用百度搜索库

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#q{
				 300px;
				height: 30px;
				padding: 5px;
				border: 1px solid #f90;
				font-size: 16px;
			}
			#ul1{
				border: 1px solid #f90;
				 310px;
				margin: 0;
				padding: 0;
				display: none;
			}
			li a{
				line-height: 30px;
				padding: 5px;
				text-decoration: none;
				color: black;
				display: block;
			}
			li a:hover{
				background: #f90;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<input type="text" name="" id="q" value="" />
		<ul id="ul1">
			<!--<li>
				<a href="javascript:;">文字1</a>
			</li>
			<li>
				<a href="javascript:;">文字2</a>
			</li>
			<li>
				<a href="javascript:;">文字3</a>
			</li>
			<li>
				<a href="javascript:;">文字4</a>
			</li>-->
		</ul>
		<script type="text/javascript">
			var oQ=document.getElementById('q');
			var oUl=document.getElementById('ul1');
			
			oQ.onkeyup=function(){
				if(this.value !=''){
					var oScript = document.createElement('script');
					oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=fn';
					document.body.appendChild(oScript);
				}else{
					oUl.style.display = 'none';
				}
			}
			
			function fn(data){
				var html = '';
				if(data.s.length){
					oUl.style.display = 'block';
					for (var i=0; i<data.s.length; i++) {
						html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
					}
					oUl.innerHTML = html;
				}else{
					oUl.style.display = 'none';
				}
			}
		</script>
	</body>
</html>

  

原文地址:https://www.cnblogs.com/yangxue72/p/8328824.html