Form Auto Completes: DHTML

[Total: 0    Average: 0/5]

When typed charactors are matched, a popup lists all words with a match of the typed charactors. Any of the listed words can then be used as the input.

Head Code:

<script language="JavaScript" type="text/javascript">
<!--
// Auto Complete ac_Part1 (29-01-2005)
// by Vic Phillips http://www.vicsJavaScripts.org.uk

// ac_Part1 Application Notes

// Any number of Text Area or Input fields may be auto completed for words contained in an array
// An auto complete PopUp will appear at a position is relative to the input when the input is focused.
// As a word is typed the array is searched for a match with the typed charactors.
// The search will be on individual words and is not case sensitive.
// If a match is found all words with the start charactors matching the typed input will be displayed in a select box.
// As more charactors are typed the list will decreased.
// The first word in the list will he higlighted.
// To use this word, depress Up Arrow or double click at the cursor position.
// To use another word from the list, select the word.

// The Auto Complete facility is initialised from an onload event in the <body> tag.
// <body onload="ac_AutoComplete();" >

// A typical application
// <input  size="10"
// onfocus="javascript:ac_Auto(this,*WordArray*,*LeftOffset*,*TopOffset*);"
// >
// where
// *LeftOffset* = the PopUp horizontal(X) offset from the target input field (digits)
// *TopOffSet*  = the PopUp vertical(Y)   offset from the target input field (digits)
// *WordArray*  = the array containing the words to search (an array variable).

// The word arrays may have any name and each input field may have the same or different array
// Word arrays fields can be automtically ordered by accending character length to enhance the search result display.

// All variable, function etc. names are prefixed with 'ac_'
// to minimise possible conflicts with other JavaScripts.

// Tested with IE6 and Mozilla FireFox


// ac_Part1 Customising Variables

// The word arrays for each application
var WordAry1=new Array('abcde','ab','abc','abcd','after','alternate','allthough','atomic','ate','annie');
var WordAry2=new Array('apple','black','ball','are','ape','bounce','angry','ask','bummer');

var ac_Sort='yes';               // set to 'yes' to sort array by accending length

// Customise to Auto Complete PopUp Appearance
var ac_MaxSelections=5;          // Max number of search results before scroll
var ac_PUTitleBGColor='#99CCFF'; // PopUp Title background color
var ac_PUBGColor='#FFCC66';      // PopUp body  background color
var ac_PUWidth=150;              // PopUp width in px
var ac_PUZIndex=1;               // PopUp needs to be above other page elements
var ac_PUOpenSpeed=10;           // PopUp opening revel speed, 1 = slow, 10 = fast, 65 = instant

//-->
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Auto Complete ac_Part2 (29-01-2005)
// by Vic Phillips http://www.vicsJavaScripts.org.uk

// Functional Code

// No Need to Change
var ac_Obj=null;
var ac_TO=null;
var ac_BdSz=0;

function ac_AutoComplete(){
 if (document.all){
  mc_WinW=document.documentElement.clientWidth;
  if (!mc_WinW){
  ac_BdSz=2;
  }
 }
 ac_TTxt=document.createTextNode('AutoComplete')
 ac_T=document.createElement("DIV");
 ac_T.style.position='absolute';
 ac_T.style.width=(ac_PUWidth-ac_BdSz)+'px';
 ac_T.style.height='18px';
 ac_T.style.top='0px';
 ac_T.style.left='0px';
 ac_T.style.backgroundColor=ac_PUTitleBGColor;
 ac_T.style.borderBottom='solid black 1px';
 ac_T.style.color='#000000';
 ac_T.style.fontSize='14px';
 ac_T.style.textAlign='center';
 ac_T.appendChild(ac_TTxt);

 ac_HTxt=document.createTextNode('If a match is found  depress UpArrow, Double Click or Select from the list to enter.')
 ac_H=document.createElement("DIV");
 ac_H.style.position='absolute';
 ac_H.style.width=(ac_PUWidth-10)+'px';
 ac_H.style.top='18px';
 ac_H.style.left='5px';
 ac_H.style.color='#000000';
 ac_H.style.fontSize='11px';
 ac_H.style.textAlign='center';
 ac_H.appendChild(ac_HTxt);

 ac_Se=document.createElement("Select");
 ac_Se.size="1"
 ac_Se.onchange=function(){ ac_Click(); }
 ac_Se.style.position='absolute';
 ac_Se.style.visibility='hidden';
 ac_Se.style.width=(ac_PUWidth-20)+'px';
 ac_Se.style.backgroundColor=ac_PUBGColor;
 ac_Se.style.fontSize=='12px'
 ac_Se.style.top='25px';
 ac_Se.style.left='10px';

 ac_Ip=document.createElement("INPUT");
 ac_Ip.style.position='absolute';
 ac_Ip.style.visibility='hidden';

 ac_PU=document.createElement("DIV");
 ac_PU.style.position='absolute';
 ac_PU.style.overflow='hidden';
 ac_PU.style.zIndex=ac_PUZIndex;
 ac_PU.style.visibility='hidden';
 ac_PU.style.width=ac_PUWidth+'px';
 ac_PU.style.height='60px';
 ac_PU.style.backgroundColor=ac_PUBGColor;
 ac_PU.style.border='solid black 1px';
 ac_PU.style.color='#000000';
 ac_PU.style.fontSize='12px';
 ac_PU.style.textAlign='center';
 ac_PU.appendChild(ac_T);
 ac_PU.appendChild(ac_Se);
 ac_PU.appendChild(ac_H);
 ac_PU.appendChild(ac_Ip);
 document.getElementsByTagName('body')[0].appendChild(ac_PU);
 ac_PUS=ac_PU.style;
 ac_SeS=ac_Se.style;
 ac_HS=ac_H.style;
}

function ac_Click(){
 if (ac_Obj){
  ac_Obj.value=ac_Content+ac_Se.options[ac_Se.selectedIndex].text;
  ac_TO=setTimeout('ac_AutoHide()',200);
 }
}

function ac_UpArrow(e){
 if (e==38&&ac_SeS.visibility=='visible'){
  ac_Click();
 }
}

function ac_Complete(ac_obj,ac_ary){
 ac_Obj=ac_obj;
 ac_Content=ac_Obj.value.substring(0,ac_Obj.value.lastIndexOf(' ')+1);
 ac_Words=ac_obj.value.split(' ');
 ac_Ip.value=ac_Words[ac_Words.length-1];
 ac_This=ac_Ip.value;
 ac_AutoHide();
 ac_Ary=new Array();
 for (ac_0=0;ac_0<ac_ary.length;ac_0++){
  if (ac_This.toLowerCase()==ac_ary[ac_0].substring(0,ac_This.length).toLowerCase()&&ac_This.length){
    ac_Ary[ac_Ary.length]=ac_ary[ac_0];
  }
 }
 if (ac_Ary.length>0){
  ac_SeS.visibility='visible';
  ac_PUS.visibility='visible';
  ac_HS.visibility='hidden';
  ac_Se.options.length=1
  for (ac_0=0;ac_0<ac_Ary.length;ac_0++){
   ac_Se.options[ac_0+1]=new Option(ac_Ary[ac_0],ac_Ary[ac_0],true,true);
  }
  ac_Se.size=ac_MaxSelections;
  if (ac_Ary.length+1<ac_MaxSelections){
   ac_Se.size=ac_Ary.length+1;
  }
  ac_Se.selectedIndex=1;
 }
 ac_PUS.height=(ac_Se.offsetHeight+35)+'px';
}

function ac_AutoHide(){
 ac_PUS.visibility='hidden';
 ac_SeS.visibility='hidden';
 ac_HS.visibility='hidden';
}

function ac_Auto(ac_obj,ac_ary,ac_x,ac_y){
 clearTimeout(ac_TO);
 if (ac_Sort=='yes'){
  ac_ary=ac_ary.sort(ac_SortLength);
 }
 ac_PUS.visibility='visible';
 ac_PUS.height='0px';
 ac_HS.visibility='visible';
 ac_SeS.visibility='hidden';
 ac_PUS.left=(ac_Left(ac_obj)+ac_x)+'px';
 ac_PUS.top=(ac_Top(ac_obj)+ac_y)+'px';
 ac_obj.words=ac_ary;
 ac_obj.onkeyup=function(){ ac_Complete(this,this.words); }
 ac_obj.ondblclick=function(){ ac_Click(); }
 ac_obj.onblur=function(){ ac_TO=setTimeout('ac_AutoHide()',200); }
 ac_Open();
}

function ac_Open(){
 ac_PUS.height=(ac_PU.offsetHeight+ac_PUOpenSpeed)+'px';
 if (ac_PU.offsetHeight<60){ setTimeout('ac_Open()',5); }
 else { ac_PUS.height='65px'; }
}

function ac_Left(ac_obj){
 ac_ObjLeft=ac_obj.offsetLeft;
 while(ac_obj.offsetParent!=null){
  ac_ObjParent=ac_obj.offsetParent;
  ac_ObjLeft+=ac_ObjParent.offsetLeft;
  ac_obj=ac_ObjParent;
 }
 return ac_ObjLeft;
}

function ac_Top(ac_obj){
 ac_ObjTop=ac_obj.offsetTop;
 while(ac_obj.offsetParent!=null){
  ac_ObjParent=ac_obj.offsetParent;
  ac_ObjTop+=ac_ObjParent.offsetTop;
  ac_obj=ac_ObjParent;
 }
 return ac_ObjTop;
}

function ac_SortLength(ac_0,ac_1){
 if (ac_0.length<ac_1.length){ return -1; }
 if (ac_0.length>ac_1.length){ return 1; }
 return 0;
}

document.onkeydown=function(evt){ ac_UpArrow(evt?evt.keyCode:event.keyCode); }

//-->
</script>

Init Code:

ac_AutoComplete();

Body Code:

<table align=center>
<!-- return false to kill the submit just for this example -->
<form onsubmit="return false">
<tr><td><b>A</b> Words:</td>

    <td><input  size="10" onfocus="javascript:ac_Auto(this,WordAry1,100,10);"></td>
</tr>
<tr><td><b>A</b> and <b>B</b>  Words:</td>
    <td><input  size="10" onfocus="javascript:ac_Auto(this,WordAry2,100,10);"></td>
</tr>
</table>
</form>

Times Viewed: 6

Leave a Reply

Your email address will not be published. Required fields are marked *