用AJAX,JSON在百度搜索栏内获取联想关键字-CSDN博客

本文链接：https://blog.csdn.net/thirdshore/article/details/50344881

<!DOCTYPE HTML >
<html>
 <head>
  <title> 百度一下，你就知道 </title>
  <meta charset="utf-8">
      <style type="text/css">
          .nav{
		      margin-top:20px;
			  text-align:right;
		     
		  }  
		  .nav a{
		      font-size:13px;
		      font-weight:bold;
			  color:black;
		  }
		  .nav .light{
		      font-weight:normal;
		  }
		  .nav .more{
				font-size:13px;
				color:white;
				background-color:#3385ff;
				display:inline-block;
				width:60px;
				height:23px;
				padding:3px;
				text-align:center;
				line-height:23px;
		  }
		  .lg{
				margin-top:15px;				
			    text-align:center;
		  }
		  .lg img{
				width:270px;
				height:129px;
				
		  }
		  .srch{
				width:643px;
				margin:50px auto;
				text-align:center;
				margin-top:22px;
		  }
		  .srch .ipt{
				height:30px;
				width:539px;
				float:left;
				
				outline:medium;
		  }
		  .srch .btn{
				height:36px;
				width:100px;
				background-color:#3385ff;
				border:none;
				color:white;
				font-size:14px;
				float:left;
				
		  }
		  .ept{
				height:240px;
		  }
		  .about{
				text-align:center;
				font-size:11px;
				margin-bottom:10px;
		  }
		  .about a{
				color:blue;
		  }
		  .cp p{
				text-align:center;
				font:12px arial;
				color:gray;
		  }
		  .cp p a{
				font:12px;
				color:gray;
		  }
		  .cp p .icon{
				width: 14px;
				height: 17px;
				display: inline-block;
				overflow: hidden;
				background: url(https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/icons_45de3f02.png) no-repeat;
				background-position: -600px -96px;
				position: relative;
				top: 3px;	  
		  }
		  #ul{
		  	list-style: none;
		  	border:1px solid gray;
		  	width: 541px;
		  	padding: 0;//消除ul列表默认的左内边距
		  }
		  #ul li{
		  	/*width: 539px;*/
		  	margin-left: 0;
		  	text-align: left;
		  }
		
      </style>
 </head>

 <body>
     <div class="nav">
	     <a href="">新闻</a> 
		 <a href="">hao123</a> 
		 <a href="">地图</a> 
		 <a href="">视频</a> 
		 <a href="">贴吧</a> 
		 <a href="" class="light">登录</a> 
		 <a href="" class="light">设置</a> 
		 <span class="more">更多产品</span> 
	 </div>
	 <div class="lg">
	     <img src="logo1.png" alt="百度logo">
	 </div>
	 <div class="srch">
	     <input type="text" class="ipt" id="inpt" /><input type="button" value="百度一下" class="btn" />
	     <ul id="ul">
	     	<li></li>
	     	<li></li>
	     	<li></li>
	     	<li></li>
	     	<li></li>
	     	<li></li>
	     	<li></li>
	     	<li></li>
	     	<li></li>
	     	<li></li>
	     </ul>
     </div>
	 <div class="ept"></div>
	 <div class="about">
			<a href="">把百度设为首页</a> 
			<a href="">关于百度</a> 
			<a href="">About Baidu</a>
	 </div>
		<div class="cp">
			<p>&copy;2015 Baidu 
				<a href="">使用百度前必读</a>
				<a href="">意见反馈</a> 京ICP证030173号<i class="icon"></i>
			</p>
		</div>

<script>
	var oInpt = document.getElementById("inpt");
	var oLi = document.getElementsByTagName('li');

<span style="white-space:pre">	</span>//使用oninput事件，输入内容后立即触发
	oInpt.oninput = function(){        
		var xhr = new XMLHttpRequest();
		xhr.open("GET","http://180.76.185.227/php/baidu.php?keyword=" + oInpt.value,true);
		xhr.send(null);
		xhr.onload = function(){
			var obj = JSON.parse(xhr.responseText);//把获取的字符串转换成<u><span style="color:#ff0000;">JSON对象</span></u>
			console.log(obj.s);   //查看可看到对象中有属性s是包含10个关联词的数组，用obj.s获取到数组的内容
			for (var i = 0; i < obj.s.length; i++) { //用for循环遍历li列表一次把数组中的值打印对应的li标签内
				oLi[i].innerHTML = obj.s[i];
			};
		}

	}
	//用两个for循环做出鼠标移入li标签上自动改变背景色的效果
	for (var i = 0; i < oLi.length; i++) {  
		
		oLi[i].onmouseover = function(){
				for (var i = 0; i < oLi.length; i++) {
					oLi[i].style.background = "";
				};
				this.style.background = "gray";
			}
	};
	
</script>
 </body>
</html>