百度搜索效果（jsonp法）

时间：2023-03-09 01:00:44
百度搜索效果（jsonp法）

百度搜索效果（jsonp法）：

不需要放在服务器中，本地就可以执行

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>jsonp法</title>

		<style type="text/css">

			* {

				margin: 0;

				padding: 0;

				list-style: none;

			}

			#box {

				width: 500px;

				margin: 50px auto 0;

			}

			#ipt {

				width: 480px;

				height: 30px;

				padding: 0 8px;

				line-height: 30px;

				font-size: 18px;

			}

			#list {

				padding: 0 10px;

				background: #e3e3e3;

			}

			#list li {

				line-height: 26px;

				font-size: 16px;

				color: blue;

			}

			#list li:hover {

				background: #ccc;

			}

		</style>

	</head>

	<body>

		<div id="box">

			<input type="text" name="ipt" id="ipt" value="" />

			<ul id="list">

				<!--<li>12306</li>

				<li>hao123</li>-->

			</ul>

		</div>

		<script src="ajax.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			var ipt = document.getElementById('ipt');

			var list = document.getElementById('list');

			var Script = null;

			ipt.onkeyup = function() {

				if(Script) {//如果存在先移除

					document.body.removeChild(Script);

				}

				Script = document.createElement('script');

				Script.src = 'http://suggestion.baidu.com/su?wd=' + ipt.value+'&cb=mycallback&_='+new Date().getTime();

				document.body.appendChild(Script);

			}

			function mycallback(json) {

				list.innerHTML = '';

				for(var i = 0; i < json.s.length; i ++) {

					list.innerHTML += '<li>'+json.s[i]+'</li>'

				}

			}

		</script>

	</body>

</html>

　　

相关文章