仿百度搜索框效果

输入文字下面会有关键字索引,和百度是一样的,没有添加搜索功能。和之前的一篇文章功能一样,只是美化了样式。

另一篇帖子 百度搜索框效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>qdabc.cn</title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style:none;}
		.demo{width: 400px;min-height: 300px;background:skyblue;margin:50px auto 0;text-align:center;padding:10px;}
		.form{width:364px;margin:0 auto;height:52px;}
		input{width:300px;height:50px;border:solid 1px #ccc;float:left;font-size:26px;text-indent:5px;}
		button{width:60px;height:52px;border:solid 1px #ccc;float:left;}
		li{text-align:left;line-height:30px;text-indent:10px;}
		li:hover{background:rgba(0,0,0,0.7);color:#fff;}
		#info{width:364px;margin:0 auto;}
		#info ul{border:solid 1px #ccc;}
	</style>
</head>
<body>
	<div class="demo">
		<div class="form">
			<input type="text" id="txt"><button>搜索一下</button>
		</div>
		<div id="info"></div>
	</div>
</body>
<script type="text/javascript">
	function ajax(obj){
		// 设置默认参数
		var defauls = {
			type:"get",
			url:"#",
			asynce:true,
			data:{},
			dataType:"json",
			jsonp:"cb",
			success:function(data){console.log(data);}
		};
		// 根据传入的参数修改默认参数
		for( k in obj ){
			defauls[k] = obj[k];
		};
		// 参数处理
		var param = "";
		for( attr in defauls.data ){
			param += attr + "=" + defauls.data[attr] + "&";
		};
		param = encodeURI( param.substring(0,param.length - 1) );
		if( param ){
			param = "?" + param;
		};
		// 判断是jsonp跨域还是ajax异步请求
		if( defauls.dataType == "jsonp" ){
			// 设置自定义函数
			var cd = "common" + ( "1.11.1" + Math.random() ).replace(/\D/g,"") + "_" + ( new Date().getTime() );
			if( defauls.jsonpCallback ){
				cd = defauls.jsonpCallback;
			};
			window[cd] = function(data){
				defauls.success(data);
			}
			var script = document.createElement("script");
			script.src = defauls.url + param + "&" + defauls.jsonp + "=" + cd;
			var head = document.getElementsByTagName("head")[0];
			head.appendChild( script );
		}else{
			// ajax异步请求
			var xhr = null;
			if( window.XMLHttpRequest ){
				xhr = new XMLHttpRequest();
			}else{
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			};
			// 准备发送
			if( defauls.type == "get" ){
				defauls.url += param;
			};
			xhr.open(defauls.type,defauls.url,defauls.asynce);
			// 发送请求
			var data = null;
			if( defauls.type == "post" ){
				data = param.substring(1,param.length);
				xhr.setRequestHeader("Content-Type","Application/x-www-form-urlencoded");
			};
			xhr.send( data );
			// 处理同步请求
			if( !defauls.asynce ){
				if( defauls.dataType == "json" ){
					return JSON.parse( xhr.responseText );
				};
				return xhr.responseText;
			};
			// 异步请求处理服务器数据
			xhr.onreadystatechange = function(){
				if( xhr.readyState == 4 && xhr.status == 200 ){
					var data = xhr.responseText;
					if( defauls.dataType == "json" ){
						data = JSON.parse( data );
					};
					defauls.success(data);
				};
			};
		};
	};
	var txt = document.getElementById("txt");
	txt.onkeyup = function(){
		var kw = this.value;
		document.getElementById("info").innerHTML = "";
		ajax({
			url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
			jsonp:"cb",
			data:{wd:kw},
			dataType:"jsonp",
			success:function(data){
				if( data.s.length !== 0 ){
					var tag = document.createElement("ul");
					for( i = 0; i < data.s.length; i++ ){
						var els = document.createElement("li");
						els.innerHTML = data.s[i];
						tag.appendChild(els);
					};
					document.getElementById("info").appendChild(tag) ;
				};
				var lis = document.getElementsByTagName("li");
				for( i = 0; i <lis.length; i++ ){
					lis[i].onclick = function(){
						var count = this.innerHTML;
						txt.value = count;
						document.getElementById("info").innerHTML = "";
					}
				};
			}
		});
	};
</script>
</html>

 

欢迎分享本文,转载请保留出处:前端ABC » 仿百度搜索框效果

分享到:更多 ()

发表评论 0