<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
</title>
<style type="text/css">
/*
<![CDATA[*/
.searchbox {
position:absolute;
overflow:auto;
z-Index:101;
visibility:hidden;
width:125px;
height:100px;
background-Color:#CCFFFF;
border:solid red 1px;
cursor:pointer;
}
.searchbox DIV {
position:relative;
width:100px;
height:20px;
background-Color:#CCFFFF;
padding-Left:5px;
border-Bottom:solid red 1px;
}
/*]]>*/
</style>
</head>
<body>
<form>
<input id="email" name="email" />
</form>
<script type="text/javascript">
/*<![CDATA[*/
// Complete Email. (19-January- 2013)
// by Vic Phillips http://www.vicsjavascripts.org.uk
var zxcCompleteEmail={
init:function(o){
var id=o.InputID,ary=o.Array,cls=o.ClassName,obj=document.getElementById(id),box=document.createElement('DIV'),mk=box.cloneNode(false),mk=box.cloneNode(false),a=doc ument.createElement('A'),d,dary=[],z0=0;
o=zxcCompleteEmail['zxc'+id]={
obj:obj,
box:box,
mk:mk,
h:obj.offsetHeight,
ary:dary
}
for (;z0<ary.length;z0++){
d=box.cloneNode(false);
d.innerHTML=ary[z0];
box.appendChild(d);
dary[z0]=[d,ary[z0]];
this.addevt(d,'mouseup','complete',o,z0);
}
box.className=cls;
mk.style.height='1px';
box.appendChild(mk);
box.appendChild(a);
document.body.appendChild(box);
this.addevt(box,'mousedown','clear',o);
this.addevt(box,'mouseover','clear',o);
this.addevt(box,'mouseout','hide',o);
this.addevt(obj,'keyup','keyup',o);
this.addevt(obj,'mouseout','hide',o);
},
keyup:function(o){
var v=o.obj.value,p=this.pos(o.obj),i=v.indexOf('@'),s;
o.box.style.left=p[0]+'px';
o.box.style.top=p[1]+o.h+'px';
o.box.style.visibility=i>2?'visible':'hidden';
s=v.substring(i+1);
o.v='';
if (i>0&&s){
o.v=v.substring(i+1);
for (var z0=0;z0<o.ary.length;z0++){
if (o.ary[z0][1].substring(0,s.length)==v.substring(i+1)){
o.box.insertBefore(o.ary[z0][0],o.mk);
}
else {
o.box.insertBefore(o.ary[z0][0],o.mk.nextSibling);
}
}
}
},
complete:function(o,nu){
var v=o.obj.value;
o.obj.value=o.obj.value.replace('@'+o.v,'@');
o.obj.value+=o.ary[nu][1];
o.box.style.visibility='hidden';
},
clear:function(o){
clearTimeout(o.to);
},
hide:function(o){
var oop=this;
o.to=setTimeout(function(){ o.box.style.visibility='hidden'; },1500);
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
addevt:function(o,t,f,p,p2){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p,p2);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p,p2); });
}
}
}
zxcCompleteEmail.init({
InputID:'email',
Array:[
'ntlworld.com',
'tom.com',
'****.com',
'harry.com',
'hary.joe',
'fred.com'
],
ClassName:'searchbox'
});
/*]]>*/
</script>
</body>
</html>