来自：http://qingfengxia2.blog.163.com/blog/static/254784072009102042036801/
<!doctype html public "-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>選擇好友</title>
<style type="text/css">
body{font-size:12px;margin:0;padding:0;}
.clearfix{zoom:0;}
.clearfix:after{content:'.';display:block;visibility:hidden;clear:both;height:0px;}
#selectfriend{float:left;border:1px solid #808080;width:400px;line-height:19px;font-size:12px;margin:10px 0 0 10px;}
#selectfriend .shaw{float:left;width:99.6%;border:1px #fff solid;border-right:0;padding-top:1px;}
#selectfriend .fribox{cursor:text;float:left;width:350px;border-top:1px #fff solid;border-left:1px #fff solid;position:relative;left:1px;}
#selectfriend .fribox .fri{background:#E0E5EE; display:block; border:1px solid #CCD5E4; float:left; margin:1px 5px 1px 0; padding:0 5px; _padding:3px 5px 2px 5px;}
#selectfriend .fribox .fri img{border:0;cursor: pointer;}
#selectfriend .fribox input{line-height:19px;width:50px;border:1px solid #fff;float:left;outline:none;}
#selectfriend a.selbtn{display:block;width:16px;height:16px;float:right;margin:3px 3px 0;padding:3px 3px 0;background:url(http://img1.kaixin001.com.cn/i/xx_xx1.gif) no-repeat center;cursor:pointer;}
#selectfriend a.on{display:block;width:16px;height:16px;float:right;margin:3px 3px 0;padding:3px 3px 0;cursor:pointer;background:url(http://img1.kaixin001.com.cn/i/xx_xs1.gif) no-repeat center;}
#selectfriend .frisel a:hover.select{background:url(http://img1.kaixin001.com.cn/i/xx_xx2.gif) no-repeat center;}
.default,.autobox{background:#EEEEEE; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: #666666; width: 220px; border-color:#98B1C8 #7F7F7F #7F7F7F #98B1C8;border-style:solid;border-width:1px 3px 3px 1px;padding:2px 5px;position:absolute;}
.autobox{background:#fff;}
.autobox div{width:98%;;margin:1px;padding:3px 0;cursor:text;background:#fff;border:1px solid #fff;border-bottom:1px solid #cccccc;}
.frisel{float:right;position:relative;right:1px;}
.frisel .allfriend{background:#FFFFFF;border:1px solid #98B1C8;padding:2px;position:absolute;right:-3px;width: 310px;display:none;}
.frisel .allfriend ul {margin:0;padding:0;float:right;width: 300px; height: 100px; overflow-y: scroll; overflow-x: hidden;}
.frisel .allfriend ul li{float:left;text-align:left;width:80px;list-style:none;background:#FFFFFF;border-bottom:1px solid #EEEEEE;color:#666666;height:20px;padding:2px 5px;}
.frisel .allfriend .sgt_on {background:#F2F6FB;border-bottom:1px solid #EEEEEE;color:#000000;height:20px;padding:2px 5px;}
.frisel .allfriend .l {float:left;}
.frisel .allfriend .r {float:right;padding-right: 20px;}
.frisel .allfriend .sgt_of {background:#FFFFFF;border-bottom:1px solid #EEEEEE;color:#666666;height:20px;padding:2px 5px;}
.p5{padding:5px;}
.gbs1 {border:1px solid #E2E2E2;float:left;}
.gb1-12, .gb2-12 {
background:#E5E5E5 none repeat scroll 0 0;
border-color:#FFFFFF #6A6A6A #6A6A6A #FFFFFF;
border-style:solid;
border-width:1px;
color:#333333;
cursor:pointer;
font-size:12px;
height:23px;
padding:3px 5px
}
.gb2-12{background:#dddddd;}
</style>
</head>
<body>
<div ;
}
},
selectAll:function(e){
if(!this.flag){this.flag=true;}
else{
this.flag=(this.flag==true)?false:true;
}
var boxAll=this.friendList.getElementsByTagName('input');
for(var i=0,olen=boxAll.length;i<olen;i++){
boxAll[i].checked=this.flag;
}
return this;
},
init:function(e){
addEventHandler(document,'click',bind(this,this.setFocus));
// addEventHandler(this.fribox,'click',bind(this,this.setFocus));
addEventHandler(this.input,'focus',bind(this,this.showDefault));
addEventHandler(this.input,'blur',bind(this,this.hideDefault));
addEventHandler(this.input,'keyup',bind(this,this.autoComplete));
addEventHandler(this.input,'keydown',bind(this,this.autoComplete));
addEventHandler(this.input,'keypress',bind(this,this.autoComplete));
addEventHandler(this.select,'click',bind(this,this.showfriendbox));
addEventHandler(this.submit,'click',bind(this,this.doSubmit));
addEventHandler(this.submit,'mouseover',bind(this,this.over));
addEventHandler(this.submit,'mouseout',bind(this,this.out));
addEventHandler(this.showgroup,'change',bind(this,this.getGroup));
addEventHandler(this.selAll,'click',bind(this,this.selectAll));
}
};
var showFriend=new show('selectfriend');
showFriend.init();
</script>
</html>