js实现百度搜索接口及链接功能

最新推荐文章于 2024-05-30 19:44:18 发布

Web攻城狮

最新推荐文章于 2024-05-30 19:44:18 发布

阅读量8.9k

点赞数 4

分类专栏： js 文章标签： js 百度搜索接口链接功能 jsonp script

本文链接：https://blog.csdn.net/b1244154318/article/details/52628442

版权

js 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

js实现百度搜索接口及链接功能

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<title>anchor</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#wei{
				width:500px;
				height:600px;
				margin:0 auto;
				border:0px solid gray;
			}
			#wei input{
					width:476px;
					height:50px;
					line-height: 50px;
					padding-left:20px;
					font-size: 16px;
			}
			#wei ul{
				height:auto;
				border:1px solid #ccc;
				display: none;
			}
			#wei ul li{
					width:100%;
					height:30px;
					line-height: 30px;
					text-indent:10px;
					font-size: 16px;
					list-style: none;
			}
			#wei ul li a{
					text-decoration:none;
			}
			#wei ul li:hover{
				display:block;
				background:#ccc;
				color:#fff;
			}
		</style>
	</head>
	<body ng-controller="show">
			<div id="wei">
				<input type="text" id="text">
				<ul id="list"></ul>
			</div>
		<script type="text/javascript">
			var txt = document.getElementById("text");
			var oUl = document.getElementById("list");
			txt.onkeyup = function(){
				var val = txt.value;
				var oScript = document.createElement("script");//动态创建script标签
				oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&cb=callback";
				//添加链接及回调函数
				document.body.appendChild(oScript);//添加script标签
				document.body.removeChild(oScript);//删除script标签
			}
			//回调函数
			function callback(data){
				var str="";
				for(var i=0;i<data.s.length;i++){
					str += "<li><a href=\"https://www.baidu.com/s?wd="+data.s[i]+"\">"+data.s[i]+"</a></li>";
				}
				//console.log(str);
				oUl.innerHTML=str;
				oUl.style.display="block";

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

Web攻城狮

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js实现百度搜索接口及链接功能

js实现百度搜索接口及链接功能 anchor *{ margin:0; padding:0; } #wei{ width:500px; height:600px; margin:0 auto; border:0px solid gray; } #wei input{ width:476
复制链接

扫一扫

专栏目录