JQuery仿Google Suggest自动提示

lysongfei

浏览: 60193 次
性别:
来自: 北京

最近访客更多访客>>

xiaoshiyier

dzh535006103

xiaobojava

code3lave

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Google jQuery CSS JavaScript HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>google.html</title>
		<meta http-equiv="content-type" content="text/html;charset=GBK">
		<script type="text/javascript" src="js/jquery-1.3.2.js" charset="GBK"></script>

		<script type="text/javascript">
			var line = 0;
			var oldValue = '';
			function del() {
				if ($("#newDiv")) {
					$("#newDiv").remove();
					line = 0;
				}
			}
		
			$(document).ready(function() {
				//文本框失去焦点时层消失
					$(document.body).click(function() {
						del();
					});
			});
		
			function vchange() {
				//alert("value change");
				del();

				//定位DIV
				var top = $("#key").offset().top;
				var left = $("#key").offset().left;
				var newDiv = $("<div/>").width($("#key").width() + 6).css(
						"position", "absolute").css("backgroundColor", "white")
						.css("left", left).css("top", top + $("#key").height() + 6)
						.css("border", "1px solid blue").attr("id", "newDiv");

				/*过滤非法字符输入*/
				if($("#key").value != ""){
					//alert(oldValue);
					
					/*过滤同名多次查询*/
					if ($("#key").val() != oldValue) {
						oldValue = $("#key").val();
						var url = 'tsearch.action';
						var params = {
								//POST参数编码处理
							key : encodeURI($("#key").val())
						};
						jQuery.post(url, params, callbackFun, 'json');
					}
					$(document.body).append(newDiv); //添加DIV
				}

				if ($("#key").val() == "") {
					$("#newDiv").remove();
				}
			}
		
			//回调函数
			function callbackFun(data) {
				var table = $("<table width='100%'/>").attr("cellpadding", "0").attr(
						"cellspacing", "0");
				if (data.result == "") {
					//alert("你的关键字有误！");
					var tr = $("<tr/>");
					var td1 = $("<td/>").html("记录为空").css("fontSize", "12px")
					.css("margin", "5 5 5 5");
					tr.append(td1);
					table.append(tr);
					$("#newDiv").append(table);
				} else {
					var array = data.result.split(",");
					for ( var i = 0; i < array.length - 1; i++) {
						//alert(array[i]);
						var tr = $("<tr/>").css("cursor", "pointer").mouseout(
								function() {
									$(this).css("backgroundColor", "white").css(
											"color", "black");
								}).mouseover(
								function() {
									$(this).css("backgroundColor", "blue").css("color",
											"white");
								}).click(function() {
							$("#key").val($(this).find("td").eq(0).html());
							del();
						});
						
						var td1 = $("<td/>").html(array[i]).css("fontSize", "12px")
								.css("margin", "5 5 5 5");
						tr.append(td1);
						table.append(tr);
						$("#newDiv").append(table);
					}
				}
			}
		</script>
	</head>

	<body>
		<h1>Google搜索</h1>
		<div style="margin-top: 20px; margin-left: 30px">
			请输入搜索关键字:
			<input name="key" id="key" onkeyup="vchange()" style="width: 300">
			<input type="button" value="Goolge一下">
		</div>
	</body>
</html>

分享到：