Jsonp 百度搜索demo

最新推荐文章于 2024-04-04 01:10:23 发布

会做饭的技术男

最新推荐文章于 2024-04-04 01:10:23 发布

阅读量79

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=h10baajccckj&title=Jsonp+%E7%99%BE%E5%BA%A6%E6%90%9C%E7%B4%A2demo

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

<body>
		<input type="text" name="keywords" id="keywords" value="" />
		<ul id="oul">
		</ul>
	</body>
	<script type="text/javascript">
		var tv=document.getElementById("keywords");
		var oul=document.getElementById("oul");
		tv.onkeyup = function(){
		//如果有输入内容的时候，就生产一个script标签获取数据
			if( tv.value != ''){
				var oScript = document.createElement("script");
				oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="   this.value   "&cb=myNeed";    
				document.body.appendChild(oScript);
				document.body.removeChild(oScript);
			}else{
				oUl.style.display="none";
			}
		}
		
		function myNeed(data){
			var x=oul.childNodes;
			for (var i = 0; i < x.length; i  ) {
				x[i].parentNode.removeChild(x[i]);
			}
			if (data.s.length<=0)
			{
				oul.style.display="none";
			}else
			{
				oul.style.display="block";
				for (var i = 0; i < data.s.length; i  )
				{
					var lx=document.createElement("li");
					var lxa=document.createElement("a");
					lxa.innerText=data.s[i];
					lxa.href="http://www.baidu.com/s?wd=" data.s[i] "";
					lx.appendChild(lxa);
					oul.appendChild(lx);
				}
			}
				console.log(data.s);
			}

	</script>