input suggestion using Javascript

DrRakha

input suggestion using Javascript , you can change it and apply it for any purpose .
javascript code

<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>

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka

input suggestion using Javascript

Topic Tags