CSSASSCSSASS

About me RSS Twitter sina weibo

三人行必有我师焉，择其善者而从之，其不善者而改之

三人行必有我师焉，择其善者而从之，其不善者而改之

三人行必有我师焉，择其善者而从之，其不善者而改之

三人行必有我师焉，择其善者而从之，其不善者而改之

三人行必有我师焉，择其善者而从之，其不善者而改之

google suggestion效果的键盘鼠标事件
作者：ONEBOYS 发表时间： 2010年08月23号，星期一阅读：2,556 次

google的suggestion功能是一个非常棒的用户体验创新，相信你之前也已经使用过了。不过由于某些原因，国内现在却不能使用这个功能了。
不过,你还可以在baidu上使用相同的功能。对于好点子好创意，模仿学习并不是件坏事。

以下demo，我抛弃suggestion的核心ajax，只是做一下鼠标键盘事件的演示。

<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<style type='text/css'>
.sugg{position:relative;font-size:12px;}
.sugg a{text-decoration:none;}
.sugg .text{width:210px;height:18px;padding:3px;color:#474747;border:1px solid #ADCAD8;}
#suggestion{display:none;position:absolute;top:26px;left:0;width:216px;border:1px solid #3890d0;border-top:0;background:#fff;}
#suggestion a{display:block;height:25px;line-height:25px;padding:0 5px;color:#000;}
#suggestion a img{vertical-align:middle;}
#suggestion #hover{background:#378ece;color:#fff;}
</style>
</head>
<body>
<div class='sugg'>
	<form id='suggF' action="http://www.baidu.com/baidu" onsubmit="document.charset='GBK';sug.hide()" accept-charset='GBK' target="_blank">
		<input class='text' type=text name=wd autocomplete="off" onkeydown="pressKey(this,event)" />
		<input id='sub' type="submit" value="搜索" />
	</form>
	<div id='suggestion'>
		<a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">思思</a>
		<a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">芊芊</a>
		<a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">cssass</a>
		<a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">敏敏</a>
		<a href='javascript:;' onmouseover="sug.hover(this);" onclick="sug.select();">黎黎</a>
	</div>
</div>
suggestion显示之后，使用方向键或鼠标进行选择。
</body>
<script type='text/javascript'>
var $id=function(o){
	return document.getElementById(o) || o;
}
var pressKey=function(o,e){
	var e = e ? e : window.event;
	var k = e.keyCode;
	switch(k){
		case 9 :  //tab键
		case 13 : return false; //回车键
		default : sug.show(o,k); break;
	}
}
var sug={
	show:function(o,k){
		/* 此时动态读取suggestion数据（略）*/
		document.getElementById('suggestion').style.display='block';
		document.onclick=function(){sug.hide()};
		if (k != 38 && k != 40 && k != 39 && k != 37) { //非方向键
			 sug.i = -1;
		}
		sug.i = sug.i || 0;
		var list = $id('suggestion').getElementsByTagName("a");
		var prev = '';
		switch(k){
			case 38:
				sug.clear();
				if (sug.i < 1) {
					sug.i = list.length
				}
				sug.i--;
				list[sug.i].id = "hover";
				o.value = list[sug.i].innerHTML;
				return false;
			case 40:
				sug.clear();
				if (sug.i == list.length - 1) {
					sug.i = -1
				}
				sug.i++;
				list[sug.i].id = "hover";
				o.value = list[sug.i].innerHTML;
				return false;
			default : break;
		}
		sug.hover=function(othis){ //鼠标划过
			sug.clear();
			for(i=0;i<list.length;i++){
				if(othis==list[i]){
					sug.i=i;
					list[sug.i].id="hover";
					o.value = othis.innerHTML;
					return ;
				}
			}
		}
		sug.clear=function(){
			prev = $id('hover');
			if (prev) prev.id = '';
		}
		sug.select=function(){ //鼠标选中
			document.charset='GBK';
			$id('suggF').submit();
		}
	},
	hide:function(){
		$id('suggestion').style.display='none';
	}
};
</script>
</html>

标签： suggestion, 键盘事件

这篇文章发布于 2010年08月23号，星期一，15:49，归类于 Javascript。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

一条评论发表在“google suggestion效果的键盘鼠标事件”上

修远兮说：

2010年08月23日于22:33

回复

留下回复