仿google搜索提示 -

WendyJan

浏览: 7213 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

仿google搜索提示

博客分类：

JavaScript

Google DWR json jQuery Ajax

我是专做后台的，平时也弄一下 javascript 和 CSS ，之前在公司用 DWR 和 JS 做了一个类似 google 的搜索提示。现在把 DWR 去掉，用静态的 JSON 数据代替，为的就是脱离后台，可以静态看到效果。现在只整理了一部分，还不支持键盘事件。如果有时间我会把剩下的功能也整理出来。

如果写得不好，大家请指教。

在 IE6 FireFox Chrome 下都可以

先看下 html 代码：

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title>Auto Complete</title>
	<script type="text/javascript" src="autoComplete.js"></script>
	<link rel="stylesheet" type="text/css" href="autoComplete.css"></link>
</head>

<body>
	<div>请输入a,b或其它字符看效果。</div>
	<div>
		<input name="summary" id="summary" class="text medium" onkeyup="Auto.autoGet(this.value);" onblur="Assist.autoClose();" autocomplete="off" /><input type="button" value="搜索">
	</div>
	<div>
		<ul id="autoUl"></ul>
	</div>
</body>
</html>

autoComplete.rar (2.3 KB)
下载次数: 1035

分享到：

数据库切分

2010-01-08 15:41
浏览 2005
评论(13)
论坛回复 / 浏览 (13 / 9957)
分类:Web前端
查看更多

13 楼 scd01234 2010-01-26

支持原创！

12 楼 jackleaf 2010-01-21

这位仁兄做的简单点了。
我做了个半成品，有键盘操作的，用jquery写的，纯js 的版本在一个项目中，不好分离。暂时用框架写了个简单的。

11 楼 huqing 2010-01-12

无图不真相

10 楼 javazeke 2010-01-11

Lucene可以提供数据，不过有些数据库也提供了建索引的功能

9 楼 WendyJan 2010-01-11

在方法autoGet里调用你的ajax方法，然后返回json格式的数据就可以了``

这里只负责前端的显示``后台你用dwr，dojo等等调用后台方法都可以``这不是本文章的重点

8 楼 jkgao801 2010-01-11

在项目应用中，这种提示的东西，一定是从数据库得到的动态数据。
静态数据无应用意义。

7 楼 javazeke 2010-01-11

这儿有个，不过是jQuery的，http://javazeke.iteye.com/blog/521390
应该比较容易上手

6 楼 WendyJan 2010-01-11

键盘事件都有的``不过之前的代码有点乱，现在还没时间去整理`

5 楼 lyg 2010-01-11

不错，如果再加上上键盘的下方向键选择事件就更好了

4 楼 xaoyaofeng 2010-01-11

效果不错,支持.

3 楼 yonglin4605 2010-01-11

是不是应该先截个图给个效果啊

2 楼 WendyJan 2010-01-08

input {
	margin: 0;
	padding: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	background: #ffffff;
}

ul li {
	line-height: 1.5em;
	margin: 0;
	padding: 0;
	width: 302px;
	background: #ffffff;
	cursor: default;
	font-size: 12px;
	height: 20px;
}

.autoUl {
	margin-top: -2px;
	padding: 0;
	width: 302px;
	border: 1px solid #111111;
	position: absolute;
	background: #ffffff;
}

.mouseOver {
	color: #ffffff;
	background: #6699FF;
}

.mouseOut {
	color: #111111;
	background: #ffffff;
}

.borderNull {
	border: none;
}

.autoNone {
	display: none;
}

.medium {
	width: 300px;
}

.resultName {
	float: left;
}

.resultTimes {
	color: #008000;
	text-align: right;
}

1 楼 WendyJan 2010-01-08

/**
 * @author <a href="mailto:toozwd@gmail.com">张文弟</a>
 * 模仿google搜索的自动完成
 * 用最精简的代码实现最强大的功能
 */

//instead document.getElementById()
var $ = function (id) {
	return "string" == typeof id ? document.getElementById(id) : id;
};

//instead document.getElementById().value
var $F = function (id) {
	return $(id).value;
};

var Auto = {
	
	autoGet : function(value) {
		if(value == '') {
			this.closePop();
		} else {
			// get the return value list from json
			var jsonValue = getListJson(value).summary;
			this.autoCallback(jsonValue);
		}
	},
	
	autoCallback : function(list) {
		//remove the old pop li
		this.closePop();
		if (list.length > 0) {
			for(var i = 0;i < list.length; i++){
				$("autoUl").className = 'autoUl';
				var autoLi = document.createElement("li");
				
				// onmouseout event
				autoLi.onmouseout = function() {
					this.className = 'mouseOut'; 
					Assist.isOnmouseover = false;
				}
				
				// onmouseover event
				autoLi.onmouseover = function() {
					this.className = 'mouseOver';
					Assist.isOnmouseover = true;
				}
				
				// onclick event
				autoLi.onclick = function() {
					Assist.autoPush(this);
				}
				
				liValue = '<div class="resultName">' + list[i].name + '</div>';
				liValue += '<div class="resultTimes">' + list[i].times + '&nbsp;结果</div>';
				autoLi.innerHTML = liValue;

				$("autoUl").appendChild(autoLi);
			}
			
			//pop the li
			var closeLi = document.createElement("li");
			closeLi.style.textAlign = "right";
			closeLi.innerHTML = '<a href="javascript:void(0);" onclick="Auto.closePop();">关闭</a>';
			$("autoUl").appendChild(closeLi);
		}
	},
	
	closePop : function() {
		var ul = $("autoUl").childNodes.length;
		for(var i = ul - 1; i >= 0 ; i--) {
			$("autoUl").removeChild($("autoUl").childNodes[i]);
		}
		$("autoUl").className = "borderNull";
	}
}

var Assist = {

	isOnmouseover : false,
	
	// close the auto complete message when onclick the page of the body(input lose focus)
	autoClose : function() {
		if(this.isOnmouseover == false) {
			Auto.closePop();
		}
	},
	
	autoPush : function(obj) {
	    $("summary").value = obj.childNodes[0].firstChild.nodeValue;
	    Auto.closePop();
	    //document.forms[0].submit();
	}

}

// the json test data
function getListJson(name) {
	if(name == 'a') {
		var summaryJson = {"summary": [  
	        {"name": "auto", "times": "13"},  
	        {"name": "ajax", "times": "15"},  
	        {"name": "abacus", "times": "33"}  
			]  
		};
		return summaryJson;
	} else if(name == 'b') {
		var summaryJson = {"summary": [  
	        {"name": "blue", "times": "18"},  
	        {"name": "blind", "times": "24"},  
	        {"name": "because", "times": "384"}  
			]  
		};
		return summaryJson;
	} else {
		var summaryJson = {"summary": [  
			{"name": "didn't input", "times": "31"},
			{"name": "the 'a' or 'b'", "times": "39"},
			{"name": "display the ", "times": "44"},  
			{"name": "defult value", "times": "129"}  
			]  
		};
		return summaryJson;
	}
}

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

仿google搜索提示

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

仿google搜索提示

评论

发表评论

相关推荐

最近访客更多访客>>