JavaScript 跨域,百度搜索框功能

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>qdabc.cn</title>
	<style type="text/css">
		/*li{
		    transition: 1s;
		}
		li:hover{
		    color: red;
		}*/
	</style>
</head>

<body>
	<input type="text" name="search" id="search" value="" />
	<ol>
	</ol>
</body>
<script type="text/javascript">
	var search = document.getElementById("search");
	var ol = document.querySelector("ol");

	search.onkeyup = function() {
		var script = document.createElement('script')
		script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + this.value + '&cb=fn';
		document.body.appendChild(script)
		document.body.removeChild(script)
	}

	function fn(data) {
		console.log(data);
		var str = '';
		for(var i = 0; i < data.s.length; i++) {
			str += "<li>" + data.s[i] + "</li>"
		}
		ol.innerHTML = str;
	}

	ol.onmouseover = function(ev) {
		var lis = document.getElementsByTagName('li')
			ev.target.style.background = 'gold'
		}
	ol.onmouseout = function(ev) {
		var lis = document.getElementsByTagName('li')
			ev.target.style.background = ''
		}
	
</script>

</html>

欢迎分享本文,转载请保留出处:前端ABC » JavaScript 跨域,百度搜索框功能

赞 (2)
分享到:更多 ()

发表评论 0