Mon Jul 23, 2012 12:42 am
<html>
<head>
<title>Javascript auto suggest </title>
<script type="text/javascript">
function SuggestAutoDB()
{
this.namesArray=new Array();
}
SuggestAutoDB.prototype.assignArray=function(aList)
{
this.namesArray=aList;
};
SuggestAutoDB.prototype.getMatches=function(str,aList,maxSize)
{
var counter=0;
for(var i in this.namesArray)
{
if(this.namesArray[i].toLowerCase().indexOf(str.toLowerCase())==0) /* ignoring case sensitive cases */
{
aList.push(this.namesArray[i]);
counter++;
}
if(counter==(maxSize-1)) /* limited to max size */
break;
}
};
function SuggestAuto(namesArray,oText,oDiv,maxSize)
{
this.oText=oText;
this.oDiv=oDiv;
this.maxSize=maxSize;
this.cur=-1;
this.db=new SuggestAutoDB();
this.db.assignArray(namesArray);
oText.onkeyup=this.keyUp;
oText.onkeydown=this.keyDown;
oText.SuggestAuto=this;
oText.onblur=this.hideSuggest;
}
SuggestAuto.prototype.hideSuggest=function()
{
this.SuggestAuto.oDiv.style.visibility="hidden";
};
SuggestAuto.prototype.selectText=function(iStart,iEnd)
{
if(this.oText.createTextRange) /* For Internet Explorer */
{
var oRange=this.oText.createTextRange();
oRange.moveStart("character",iStart);
oRange.moveEnd("character",iEnd-this.oText.value.length);
oRange.select();
}
else if(this.oText.setSelectionRange) /* For FireFox */
{
this.oText.setSelectionRange(iStart,iEnd);
}
this.oText.focus();
};
SuggestAuto.prototype.textComplete=function(sFirstMatch)
{
if(this.oText.createTextRange || this.oText.setSelectionRange)
{
var iStart=this.oText.value.length;
this.oText.value=sFirstMatch;
this.selectText(iStart,sFirstMatch.length);
}
};
SuggestAuto.prototype.keyDown=function(oEvent)
{
oEvent=window.event || oEvent;
iKeyCode=oEvent.keyCode;
switch(iKeyCode)
{
case 38: //up arrow
this.SuggestAuto.moveUp();
break;
case 40: //down arrow
this.SuggestAuto.moveDown();
break;
case 13: //return key
window.focus();
break;
}
};
SuggestAuto.prototype.moveDown=function()
{
if(this.oDiv.childNodes.length>0 && this.cur<(this.oDiv.childNodes.length-1))
{
++this.cur;
for(var i=0;i<this.oDiv.childNodes.length;i++)
{
if(i==this.cur)
{
this.oDiv.childNodes[i].className="over";
this.oText.value=this.oDiv.childNodes[i].innerHTML;
}
else
{
this.oDiv.childNodes[i].className="";
}
}
}
};
SuggestAuto.prototype.moveUp=function()
{
if(this.oDiv.childNodes.length>0 && this.cur>0)
{
--this.cur;
for(var i=0;i<this.oDiv.childNodes.length;i++)
{
if(i==this.cur)
{
this.oDiv.childNodes[i].className="over";
this.oText.value=this.oDiv.childNodes[i].innerHTML;
}
else
{
this.oDiv.childNodes[i].className="";
}
}
}
};
SuggestAuto.prototype.keyUp=function(oEvent)
{
oEvent=oEvent || window.event;
var iKeyCode=oEvent.keyCode;
if(iKeyCode==8 || iKeyCode==46)
{
this.SuggestAuto.onTextChange(false); /* without SuggestAuto */
}
else if (iKeyCode < 32 || (iKeyCode >= 33 && iKeyCode <= 46) || (iKeyCode >= 112 && iKeyCode <= 123))
{
//ignore
}
else
{
this.SuggestAuto.onTextChange(true); /* with SuggestAuto */
}
};
SuggestAuto.prototype.positionSuggest=function() /* to calculate the appropriate poistion of the dropdown */
{
var oNode=this.oText;
var x=0,y=oNode.offsetHeight;
while(oNode.offsetParent && oNode.offsetParent.tagName.toUpperCase() != 'BODY')
{
x+=oNode.offsetLeft;
y+=oNode.offsetTop;
oNode=oNode.offsetParent;
}
x+=oNode.offsetLeft;
y+=oNode.offsetTop;
this.oDiv.style.top=y+"px";
this.oDiv.style.left=x+"px";
}
SuggestAuto.prototype.onTextChange=function(bTextComplete)
{
var txt=this.oText.value;
var oThis=this;
this.cur=-1;
if(txt.length>0)
{
while(this.oDiv.hasChildNodes())
this.oDiv.removeChild(this.oDiv.firstChild);
var aStr=new Array();
this.db.getMatches(txt,aStr,this.maxSize);
if(!aStr.length) {this.hideSuggest ;return}
if(bTextComplete) this.textComplete(aStr[0]);
this.positionSuggest();
for(i in aStr)
{
var oNew=document.createElement('div');
this.oDiv.appendChild(oNew);
oNew.onmouseover=
oNew.onmouseout=
oNew.onmousedown=function(oEvent)
{
oEvent=window.event || oEvent;
oSrcDiv=oEvent.target || oEvent.srcElement;
//debug :window.status=oEvent.type;
if(oEvent.type=="mousedown")
{
oThis.oText.value=this.innerHTML;
}
else if(oEvent.type=="mouseover")
{
this.className="over";
}
else if(oEvent.type=="mouseout")
{
this.className="";
}
else
{
this.oText.focus();
}
};
oNew.innerHTML=aStr[i];
}
this.oDiv.style.visibility="visible";
}
else
{
this.oDiv.innerHTML="";
this.oDiv.style.visibility="hidden";
}
};
function createSuggestAuto()
{
var namesArray =
[
"AA", "ASAS", "AERA", "ASAS", "ASDF",
"BBAB", "BABAA", "BABABA", "BDSBB", "BSDAE",
"CASFDS", "CASAS", "CCAEEE", "CADSDD", "CEEFDF", "CEEFds",
"DSEERE", "DSDFS", "DFSE", "DFSDSe", "DSSEE", "DEEE",
"EDDDD", "EEEWW", "EAAA", "EEWWl", "ESDSDS", "EFDFD", "EaASDn",
"FSDFDE", "FDFSS", "FRERER", "FDFSS", "FEREW", "FFD", "FREE",
"GFFFS", "GEEEd", "GaEEy", "GEi", "GEEEel", "GaEEna", "GaFge", "GaiEl",
"HFSS", "HEEEib", "HEEa", "HaEr", "HEEEan", "Haggan", "HaEe", "HaEs",
"IREE", "Ian", "IDe", "IEe", "Iggi", "Iggy", "Ignatius", "IEor", "IEb", "Ike",
"JDSFS", "JabilDo", "JDk", "Jackson", "Jaco", "Jacob", "Jacques", "JaEon", "Jadyn",
"KSDFS", "KabDli", "KaEDa", "KacDa", "Kaden", "Kadin", "Kaellen", "KaEijah",
"LEREE", "LDDl", "LaEEd", "LajDn", "LEale", "LEamar", "LaEdmont", "LEe", "Lancelot",
"MSSDF", "MaDDD", "MEc", "Macha", "Mack", "Mackenzie", "MaEin", "Macon", "Maddox",
"NEEE", "NabEEil", "NaEv", "NDv", "Nahme", "Naiser", "NEma", "Nalo", "Namir",
"OEWAA", "OaDDy", "ObEiah", "ObDe", "Obed", "Obediah", "ObFence", "Oberon",
"PWASS", "PaEE", "PadEic", "PDy", "Palti", "Pancho", "PaEila", "Paolo",
"QEERE", "QuEEon", "QuElan", "QuDy", "Quincey", "QuEy", "Quinlan",
"RERE", "REEe", "RafSello", "RDfi", "Raimi", "RalEgh", "RalDph", "Ramesh",
"SSD", "SaEa", "SSdE", "Seal", "Salome", "SEalvador", "SEaFDlvator",
"TER", "TEi", "Takeya", "TaFot", "Tallulah", "TEaEn", "TEamid", "Tamzen",
"UWW", "UiDDDm", "UlEnd", "UlEus", "Ulf", "UliEs", "Ulliem", "Ulric",
"VWEWEW", "VaDDte", "ValeEe", "Vallis", "VaE", "VEanEce", "Vander",
"WSSSR", "WfFdo", "Walker", "WaEce", "WaFy", "Walter", "Walton",
"XASS", "XaDFDFer", "XyEn",
"YFDAS", "YDfDF", "YER", "YERc", "YaEAs", "YEi", "YasF", "YEAr",
"ZFDDF", "ZDFDFriah", "ZaAy", "ZFEry", "ZEk", "ZacEy", "ZR",
];
new SuggestAuto(namesArray,document.getElementById('txt'),document.getElementById('mydiv'),10);
}
</script>
<style type="text/css">
#mydiv{
position:absolute;
background:#CCC;
width:140px;
}
#mydiv div{
background:#CCC;
color:#F00;
padding-left:5px;
text-align:left;
}
#mydiv div.over{
color:#f00;
background:#CCC;
}
</style>
</head>
<body onLoad="createSuggestAuto();">
<h1>
<p>
JavaScript will suggest names to you based on what you type in the text area below (Names are case sensitive)
<p>
<div style="text-align:center;">
<form SuggestAuto=off>
Type name here : <input type="text" id="txt" style="border:#F00001 1px solid;width:160px;" SuggestAuto=off>
<div id="mydiv" style="visibility:hidden;border:#f00000 1px solid;width:160px;">
</form>
</div>
</body>
</html>
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com
Powered by phpBB © phpBB Group.