【百度搜索框】

html样式

<div class="img"></div>
	<div class="yi">
		<input type="text" id="search" value="" />
		<input type="button" value="百度一下" id="baidu"/>
	
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>

css样式

*{margin: 0;padding: 0;}
		    html{
		    	width: 100%;
		    	height: 100%;
		    	background: url(img/ali.jpg) no-repeat;
		    	background-size: 100% 100%;
		    }
			#search{
				width: 537px;
				height: 45px;
				margin: 0 auto;
				font-size: 18px;
				padding-left:10px ;
			}
			#baidu{
				width: 110px;
				height: 50px;
				
				background: #C29B9C;
				color: #fff;
				font-size: 18px;
			}
			ul{
				width: 547px;
				/*height: 250px;*/
				background: #fff;
				/*border: 1px solid #CCCCCC;*/
				list-style: none;
				display: none;
			}
			li{
				line-height: 40px;
				width: 547px;
				font-size: 18px;
				text-indent:1em ;
				/*margin-left: 12px;
				margin-top: 5px;*/
			}
			li:hover{
				background: #eee;
			}
			.yi{
				width: 670px;
				margin: 70px auto;
			}
			
			.img{
				width: 470px;
				height: 198px;
				background-image: url(img/baidu.png);
				background-size:100% 100% ;
				margin: 40px auto;
			}

js样式

var baidu = document.getElementById("baidu");
			var li = document.getElementsByTagName("li");
			var inp =document.getElementById("search");
			baidu.onclick = function(){
				for (var i=2;i>=0;i--){
					if(i==0){
						li[0].innerText = document.getElementById("search").value;
					}else{
						li[i].innerText = li[i-1].innerText;
					}
				}
			}
			var search = document.getElementById("search");
//			聚焦事件
			search.οnfοcus=baidu.οnfοcus=function(){
				var ul = document.getElementsByTagName("ul")[0];
				ul.style.display="block";
			}
//			失焦事件
			search.οnblur=baidu.οnblur=function(){
				var ul = document.getElementsByTagName("ul")[0];
				ul.style.display="none";
			}
			 for(var x of li){
         		x.onmousedown = look ;    
     		}
     		function look(){
         		inp.value = this.innerHTML;
     		}

转载于:https://www.cnblogs.com/FFPING/p/8326158.html