百度搜索

最新推荐文章于 2024-07-28 21:00:17 发布

MiemieWan

最新推荐文章于 2024-07-28 21:00:17 发布

阅读量334

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/MiemieWan/article/details/78343015

本文介绍了一个使用JSONP技术实现的百度搜索建议示例。该示例通过监听输入框的文字变化，动态创建并加载script标签请求百度的搜索建议API，获取推荐的搜索词汇，并实时更新到页面中供用户选择。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	.all {
		width: 600px;
		margin: 100px auto;
	}
	#keyword {
		width: 400px;
		height: 30px;
		vertical-align: middle;
		padding: 0 10px;
	}
	#search {
		height: 34px;
		width: 50px;
		vertical-align: middle;
	}
	#ul1 {
		list-style: none;
		background-color: #ccc;
		width: 424px;		
	}
	#ul1 li {
		height: 30px;
		line-height: 30px;
		padding: 10px;
	}
	#ul1 li:hover {
		background-color: #999;
		
	}
</style>
</head>
<body>
	<div class="all">
		<form name="search" autocomplete="off"><!--autocomplete="off"阻止了输入相同内容时的默认提示-->
			<input type="text" name="keyword" id="keyword">
			<input type="submit" value="搜索" id="search">
		</form>
		<ul id="ul1"></ul>
	</div>
		  
    <script type="text/javascript">
    	//搜索关键字
	  	var keyword = document.getElementById('keyword');		
    	var ul1 = document.getElementById('ul1');
    	var search = document.getElementById('search');
    	var scriptNode = null;
    	
    	//创建script 访问百度搜索
    	keyword.onkeyup = function() {
    		if(scriptNode) {
    			document.body.removeChild(scriptNode);   			
    		}
    		scriptNode = document.createElement('script');
			scriptNode.type = 'text/javascript';
			//wd是搜索内容，cb 是回调函数
			scriptNode.src = 'http://suggestion.baidu.com/su?wd='+keyword.value+'&cb=callbackFunction&_='+new Date().getTime();
			document.body.appendChild(scriptNode);			
    	}
    	
    	//script的回调函数    	
    	function callbackFunction(result) {
    		ul1.innerHTML = '';
	  		for(var i = 0; i<result.s.length; i ++) {
	  			ul1.innerHTML += '<li>' + result.s[i]+ '</li>';
	  		}
	  		var li = document.getElementsByTagName('li');
	  		for(var i=0;i<li.length;i++) {
	  			li[i].onclick = function() {
		  			keyword.value = this.innerHTML;
		  		};
	  		}	  		
    	};
    	
    	//点击搜索时跳转搜索页面
    	search.onclick = function() {
    		if(keyword.value == ''){
    			alert('请输入内容！！！');
    		}else{
    			window.open("http://www.baidu.com/s?wd=" + keyword.value);
    		}
    		
    	};
    	
    	
	</script>
<!--按键弹起时才添加script并请求，所以不能在这里使用script
<script type="text/javascript" src="http://suggestion.baidu.com/su?wd=html&cb=callbackFunction&_="+new Date().getTime()></script>
-->
</body>
</html>