模仿百度窗口实现搜索功能？

效果图:
在这里插入图片描述

备注:
// 1、点击其他任何地方，搜索列表隐藏
// 2、绑定搜索接口，每键入一个值就从服务器获取数据
// 3、展示搜索列表
// 4、给每个搜索关键字加上链接

用JS或JQ实现:
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>百度搜索</title>
  <style>

*{
	margin: 0;
	padding: 0;
}
body{
  background-color: #333;
  background: no-repeat;
  background-image: url(img/jiaoty.png);
  background-size: 100%;
}
#main{
	margin-top:150px;
	margin-left:400px; 
}
#logo{
	width: 120px;
	height: 100px;
  background-image: url(img/shengxian.png);
  background-size: 100%;
	float: left;
	margin-right: 20px;
	margin-top:-40px; 
}
#search-form{
	padding:5px;
	float: left;
	background-color: #fff;
}
#search-form #search-input{
	height: 25px;
	line-height: 25px;
	width: 388px;
	float: left;
	outline: none;
	border:none;
}
#search-form #search-icon{
	float: left;
	width:29px;
  height: 29px;
  background-image: url(img/sousuo.png);
  background-size: 100%;
	outline: none;
	border:none;
}
#search-results{
	background-color: #fff;
	width: 428px;
	position: absolute;
	display:none;
}
#search-results ul{
	list-style: none;
	border:2px solid #c2c2c2;
}
#search-results ul li{
	padding: 2px;
	height: 25px;
	line-height: 25px;
	font-size: 14px;
}
#search-results ul li:hover{
	background-color: rgb(240,240,240);
	text-decoration: underline;
	cursor: pointer;
}
  </style>
</head>
<body>
  <div id="main">
		<div id="logo"></div>
		<form id="search-form">
			<input type="text" name="" id="search-input"/>
			<span id="search-icon"></span>
		</form>
	</div>
	<div id="search-results">
			<ul id="search-list">
			</ul>
  </div>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
// 1、点击其他任何地方，搜索列表隐藏
// 2、绑定搜索接口，每键入一个值就从服务器获取数据
// 3、展示搜索列表
// 4、给每个搜索关键字加上链接

var getDOM = function(id) {
	return document.getElementById(id) || document;
}

/*
	解决浏览器兼容封装绑定事件的函数
	用以下属性绑定事件的优势就是可以绑定多个事件，onclick
	则会覆盖之前的绑定事件
*/
var addEvent = function(event,id,callback){
	var element = getDOM(id);
	if(element.addEventListener){ //非IE浏览器
		element.addEventListener(event,callback,false);
	}else if(element.attachEvent){//IE浏览器
		element.attachEvent('on'+event,callback);
	}
};

var getLeft = function(id){
	var el = getDOM(id);
	var selfLeft = el.offsetLeft;
	var oParent = el.offsetParent;
	while(oParent!=null){ //当有多个父级嵌套时
		selfLeft+=oParent.offsetLeft;
		oParent = oParent.offsetParent;
	}

	return selfLeft;
}
var getTop = function(id){
	var el = getDOM(id);
	var selfTop = el.offsetTop;
	var oParent = el.offsetParent;
	while(oParent != null){
		selfTop+=oParent.offsetTop;
		oParent = oParent.offsetParent;
	}

	return selfTop;
}

var ajaxGet = function(url,callback){
	//使用原生js无法实现跨域请求
	// var _xhr = null;
	// if(window.XMLHttpRequest){
	// 	_xhr = new XMLHttpRequest();
	// }else if(window.ActiveXObject){
	// 	_xhr = new ActiveXObject("Msxml2.0XMLHTTP");
	// }
	// _xhr.onreadystatechange = function(){
	// 	if(_xhr.readyState === 4 && _xhr.status === 200){
	// 		var json = JSON.parse(_xhr.resonseText);
	// 		console.log(json);

	// 		callback(json);
	// 	}
	// }

	// _xhr.open("GET",url,true);
	// _xhr.setRequestHeader("Origin", '*');
	// _xhr.send();
	$.get(url,callback,'jsonp');

}

/*
	事件代理
*/
delegateEvent = function(target,event,fn){
	addEvent(event,document,function(e){
		if(e.target.nodeName == target.toUpperCase()){
			fn.call(e.target);
		}
	})
}
window.baidu = {
	sug:function(data){
		var results = data.s;
		var oListP =  getDOM('search-results');
		var oList = oListP.getElementsByTagName("ul")[0];
		if(results.length == 0){
			oListP.style.display = "none";
		}else{
			var html = "";
			for(var i= 0;i<results.length;i++){
				html+="<li>"+results[i]+"</li>";
			}
			var left = getLeft('search-form');
			var top = getTop('search-form');
			oList.innerHTML = html;
			oListP.style.left = left+"px";
			oListP.style.top = top+38+"px";
			oListP.style.display = "block";
		}
	}
}
addEvent('click',document,function(){
	var oResults = getDOM('search-results');
	var oUl = oResults.getElementsByTagName('ul')[0];
	oUl.innerHTML = "";
	oResults.style.display = "none";
});

addEvent('keyup','search-input',function(){
	var keyword = this.value;
	var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+keyword;
	ajaxGet(url,window.baidu.sug);

});

delegateEvent('li','click',function(){
	var keyword = this.innerHTML;
	location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=25017023_10_pg&wd="+keyword;
});
  </script>
</body>
</html>

JQ代码:(第二种实现方法)

// 1、点击其他任何地方，搜索列表隐藏
// 2、绑定搜索接口，每键入一个值就从服务器获取数据
// 3、展示搜索列表
// 4、给每个搜索关键字加上链接
//使用jQuery 

$('#search-input').bind('keyup',function(){
	var key = $('#search-input').val();
	$.get("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+key,window.baidu.sug,'jsonp');
});

 //定义回调函数                
 window.baidu = {                    
 	sug: function(data) { 
	 		var results = data.s;
	 		if(results.length == 0){
	 			$('#search-results').hide();
	 		}else{
	 			var html = "";
				for(var i= 0;i<results.length;i++){
					html+="<li>"+results[i]+"</li>";
				}
				$('#search-results ul').html(html);
				$('#search-results').css({
					left:$('#search-form').offset().left,
					top:$('#search-form').offset().top+$('#search-form').height()+10
				}).show();     
	 		}
			                      
 		}
};

$(document).bind('click',function(){
	$('#search-results ul').html("");
	$('#search-results').hide();    
});
/*
	事件代理，一般用于为js动态生成的多个同类元素添加事件
*/
$(document).delegate('li','click', function(){
	var keyword = $(this).text();
	location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=25017023_10_pg&wd="+keyword+"&oq=%25E4%25BD%25A0%25E5%25A5%25BD&rsv_pq=9ec1a62a0001027a&rsv_t=4664T41fswButqvfw6Mc6AbEekGn41Zzz5t%2BzeyhctPdm0DfycU18wvzEStlfgrGBOdgOZo&rqlang=cn&rsv_enter=0&inputT=7590&rsv_sug3=12&rsv_sug1=7&rsv_sug7=100&rsv_sug4=8271";
});

总结:图片自定义设置，复制粘贴代码可以实现功能，

模仿百度窗口实现搜索功能？

猜你喜欢