'**************************************
' Name: Combo Box
' Description:The input box simulates a combo box by populating it with an array. Type in Java or JavaScript and the words will appear as you type or continue typing something that starts out the same but ends up different. If you backspace and then start typing it will pick up where you left off. You can also scroll up and down through the list with the arrow keys for those words with the first letter you typed. The click event can cause a problem since we lose our position in the temp variable. Thus, when the user clicks the Temp is disabled and whatever they type in box can still be submitted with the form. Works great in Internet Explorer but due to limitations of Netscape(namely capturing keystrokes)it is a little buggy but it does work! Netscape 6 offers hope when they have a full release. You can copy,paste and save the code as html to see a working example.
' By: Dave Miller
'
'This code is copyrighted and has' limited warranties.Please see http://www.Planet-Source-Code.com/vb/scripts/ShowCode.asp?txtCodeId=1846&lngWId=14'for details.'**************************************
<!--davemi@netzero.net May 24, 2000-->
<HTML>
<!--Originally I wrote this for a ColdFusion application, so some of the variables may seem bit clunky, as I had to compensate for differing arrays.-->
<HEAD>
<title>Combo Box</title>
<script>
ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ))
ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4 ))
var Set = new Array()
//Set Global Variables
ltrchk=1; // ltrchk is a counter for the .substring() function
i=1; // i is a variable used to seed the Set Array, its value changes throughout
v=1; // v is the Hold Array's length/elements. It is started at 1 here because
// it is being seeded from a ColdFusion Array
w=0; // w is a counter used to control the up/down arrow
ArrTemp=""; // Used to hold initial value in inputbox
var Temp="";// Temp will be used for the user's input
var Z; // Z is used for the switch case
var G=0; // G is used to filter the correct results
var G1=0; // g1 is used to filter the correct results
var P = "False"; //P is used to detect the shift key
o=0; //use o to check for the backspace button being pushed
d=0; //general variable used to track the length of the Temp
n=0; //switch for the arrow key
//switches for NetScape
var Foc = "off";
var keycode=""
var name =""
// Seed your array here.
Set[0]=""; //it is much nicer to populate in alphabetical order
Set[1]="JAVA";
Set[2]="JAVASCRIPT";
Set[3]="J++";
Set[4]="C";
Set[5]="C++";
Set[6]="COBOL";
Set[7]="PASCAL"; //Set your array to all upper case or add in the lowercase
Set[8]="HTML"; //ASCII keyboard command values into the switch statement.
Set[9]="ADA"; //or use the .toUpperCase() or .toLowerCase() to save time
Set[10]="VISUAL BASIC";
Set[11]="FORTRAN";
i=12; //if you were using a database or another array you would loop this variable
var Hold = new Array(i) //The Hold array is initialized here using the length of the Set Array
for(m=1;m<i;m++)
{ Hold[m] = "Null"} //Fill the array with a value and we'll filter it out later.
function Erase(name)
{
name.value =""; // Clear the input box.
}
//This function allows the up and down arrow keys to scroll through the Hold Array and display them within the input box.
function Scroll(w,scrUp,name)
{
if (v != -1) //Set v to -1 to compensate for initial value placed in the input box when
//the user hits a key with a corresponding value in the Array
{
if(scrUp=="yes") //Allow to scrollup only if you have scrolled down!
{ if(w==-1) //If you have scrolled down do not allow them to scroll up out up
//the array.
{ G=1; //This stops the scrolling from falling through the program again
w=0; //Array stops at 0
}
if (name.value.charAt(0) == Hold[w].charAt(0))//Scrolling off the first letter
{
if (w < Hold.length)
{
if (Hold[w] !="Null") //Weed out that value.
{
Erase(name);
utopia = Hold[w].toUpperCase();
Temp=""//reset the Temp value or concatenation will occur
text = name.value + utopia;
name.value = text.toUpperCase();
highlight(name);
}
}
}
}
else
{ w=w-1; //Scroll down but start at 0
if (name.value.charAt(0) == Hold[w].charAt(0) && Hold[w] != ArrTemp)
{ //weed out the value that is already there from showing up again.
if (w <= v) //remember that Hold Array is bigger than needed, keep the
//counter to the actual value and not to the Set Array
{
if (Hold[w] !="Null")
{
Erase(name);
utopia = Hold[w].toUpperCase();
Temp=""
text = name.value + utopia;
name.value = text.toUpperCase();
highlight(name);
}
}
}
}
}
}
function Arr(name)
{ // if you want them to scroll through the whole list then just match
//up the arrays
v=-1; //Hold Array needs to be started at 0
for (i=1;i<Set.length;i++) //Check the entire Set Array
{ //for character matches
if (name.value.charAt(0) == Set[i].charAt(0) && name.value != Set[i])
{++v
for (f=1;f<Set.length;f++)
{
if (Hold[f] == Set[f]) //Just in case it is already there
//don't put it in there again
{
continue;
}
else
{
Hold[v] = Set[i] //if there is a match populate the
//Hold Array
}
}
}
}
w++;G1=v;
}
function Check(name)
{
if(name.value != "")
{G1=-1;} //if the user clicks back during typing then don't allow
} //becuase Temp will be out of Sync.
function Record()
{
if(ie4)
{
if (event.keyCode == 16) // If they use the shift key record it here. IF they hold the
//shift key down and
{ P="True"; } //type then it will only record the first keystroke with the shift key.
}
}
function fmain(Z)
{
//Main function
if (name.value == "")
{
w=0;
G1=0;
ltrchk=1;//if they backspace or delete the entire input box, reset everything
G=0;
i=1;
v=1;
Temp="";
Z="";
o=0;
n=0;
m=0;
}
//alert(event.keyCode);
switch(Z) //add other keys as needed, some keys are scan code numbers
{ //by not putting in the you are limiting what can be typed in.
case 8 : if (name.value ==""){ break;}
else
{G1=0;G=6;o=1;d= name.value.length;Temp = name.value;
Temp= Temp.substring(0,d); break;}
case 16 : break; //shift
case 32 : if (Temp != ""){Temp +=" ";if (o==1){ltrchk -=1;}}
break; //Spacebar don't fall through
case 37 :o=0;G1=0;n=1; G=6; d= name.value.length;Temp = name.value; Temp= Temp.substring(0,d)//If they hit the left arrow don't run through the program!
case 38 : //Scrolling here, the values are already set, don't reset them
if (name.value == "")
{
break;
}
else
{
for (c=1;c<Set.length;c++)
{
if (Set[c] == name.value)
{
if(w !=0)//don't scroll up if there is nothing there
{
scrUp="yes"; Scroll(w=w-1,scrUp,name);G1=-1; break;
}
else
{
G1=-1;break; //if they can't scroll up don't fall through the
//letter checker below.
}
}
}
}
break;
case 39 : G=6; d= name.value.length;Temp = name.value; Temp= Temp.substring(0,d)//if they hit the right arrow don't run through the program!
break;
case 40 :
if (name.value == "")
{
break;
}
else
{
for (c=1;c<Set.length;c++)
{
if (Set[c] == name.value)
{
if(w==0){ArrTemp = Set[c]}; scrUp="no"; Arr(name);Scroll(w,scrUp,name);if (w >=v+1){w=v+1};G1=-1; break;
//adjust your variables. They are off because of the different
//Array starting points
}
else if(c == Set.length && Set[c] != name.value)
{
ArrTemp="no"; Scroll("ArrTemp",name); break;
}
else
{
continue;
}
}
}
break;
case 46 : G=6; d= name.value.length;Temp = name.value; Temp= Temp.substring(0,d);break;
case 48 : if (P == "True"){Temp +=")";P = "False";break;}
else{(Temp +="0"); P="False";break;}
case 49 : if (P == "True"){Temp +="!";P = "False";break;}
else{(Temp +="1"); P="False";break;}
case 50 : if (P == "True"){Temp +="@";P = "False";break;}
else{(Temp +="2"); P="False";break;}
case 51 : if (P == "True"){Temp +="#";P = "False";break;}
else{(Temp +="3"); P="False";break;}
case 52 : if (P == "True"){Temp +="$";P = "False";break;}
else{(Temp +="4"); P="False";break;}
case 53 : if (P == "True"){Temp +="%";P = "False";break;}
else{(Temp +="5"); P="False";break;}
case 54 : if (P == "True"){Temp +="^";P = "False";break;}
else{(Temp +="6"); P="False";break;}
case 55 : if (P == "True"){Temp +="&";P = "False";break;}
else{(Temp +="7"); P="False";break;}
case 56 : if (P == "True"){Temp +="*";P = "False";break;}
else{(Temp +="8"); P="False";break;}
case 57 : if (P == "True"){Temp +="(";P = "False";break;}
else{(Temp +="9"); P="False";break;}
case 65 : if (n!=1){ Temp += "A"; P="False";G=0;m=0;if (o==1){ltrchk--;}}
else{Temp =name.value;}break; //if they use the backspace, we have
//to readjust our location Temp
//variable
case 66 : if (n!=1) {Temp += "B"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 67 : if (n!=1) {Temp += "C"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 68 : if (n!=1){Temp += "D"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 69 : if (n!=1){Temp += "E"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 70 : if (n!=1){Temp += "F"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 71 : if (n!=1) {Temp += "G"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 72 : if (n!=1){Temp += "H"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 73 : if (n!=1){Temp += "I"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 74 : if (n!=1){Temp += "J"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 75 : if (n!=1){Temp += "K"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 76 : if (n!=1){Temp += "L"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 77 : if (n!=1){Temp += "M"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 78 : if (n!=1){Temp += "N"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 79 : if (n!=1){Temp += "O"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 80 : if (n!=1){Temp += "P"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 81 : if (n!=1){Temp += "Q"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 82 : if (n!=1){Temp += "R"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 83 : if (n!=1){Temp += "S"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 84 : if (n!=1){Temp += "T"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 85 : if (n!=1){Temp += "U"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 86 : if (n!=1){Temp += "V"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 87 : if (n!=1){Temp += "W"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 88 : if (n!=1){Temp += "X"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 89 : if (n!=1){Temp += "Y"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 90 : if (n!=1){Temp += "Z"; P="False";G=0;if (o==1){ltrchk--;}}
else{Temp =name.value;Temp.toUpperCase();}break;
case 186 : if (P == "True"){Temp +=":";P = "False";break;}
else{(Temp +=";"); P="False";break;}
case 187 : if (P == "True"){Temp +="+";P = "False";break;}
else{(Temp +="="); P="False";break;}
case 188 : if (P == "True"){Temp +="<";P = "False";break;}
else{(Temp +=","); P="False";break;}
case 189 : if (P == "True"){Temp +="_";P = "False";break;}
else{(Temp +="-"); P="False";break;}
case 190 : if (P == "True"){Temp +=">";P = "False";break;}
else{(Temp +="."); P="False";break;}
case 191 : if (P == "True"){Temp +="?";P = "False";break;}
else{(Temp +="/"); P="False";break;}
case 192 : if (P == "True"){Temp +="~";P = "False";break;}
else{(Temp +="`"); P="False";break;}
case 219 : if (P == "True"){Temp +="{";P = "False";break;}
else{(Temp +="["); P="False";break;}
case 220 : if (P == "True"){Temp +="|";P = "False";break;}
else{(Temp +="\\"); P="False";break;}
case 221 : if (P == "True"){Temp +="}";P = "False";break;}
else{(Temp +="]"); P="False";break;}
case 222 : if (P == "True"){Temp +="\"";P = "False";break;}
else{(Temp +="'"); P="False";break;}
default : Z="default"; if(ns4) {G=6;d= name.value.length;Temp = name.value;
Temp= Temp.substring(0,d)}//Try and compensate for Netscape
//You may need to add other keys. IF the key is not here and they hit it, the program
break; //won't allow the key to be entered.
}
if (G !=6) //backspace adjust
{
if (Z!=16 && Z!="default")
// Stop the shift and delete from going through all the time
{
if(G1!=-1) //This baby stops the those nasty fall throughs
{
for (i=1; i <Set.length; i++)
{
if (Temp.indexOf(Temp,0) == Set[i].indexOf(Temp,0) )
{ //begin setting up the letter checker with what is stored
//in Temp
utopia = "";
utopia = Set[i].substring(ltrchk,50);
Erase(name)
text = "";
text = Temp + utopia;
name.value = text.toUpperCase();
ltrchk++;
highlight(name);
G=0;o=0;n=0;
break;
}
else
//weed out those cases where the user types
//something already in the array.
if(i+1 ==Set.length)
{
name.value = Temp;
//if the value they type is different then the array, don't lose
//the value
ltrchk=1;
G=0;n=0;L=0;
break;
}
}
}
}
}
else
{
for (i=1; i <Set.length; i++)
{
if ( Temp == Set[i].substring(0,d=d+1))
{
utopia = "";
Erase(name);
//If the user use the backspace compensate here
text = "";
text = Temp
name.value = text.toUpperCase();
ltrchk=d;n=0;o=0;break
}
else
{
text = "";
text = Temp
name.value = text.toUpperCase();
ltrchk=d;n=0;o=0;break;
}
}
}
}
function mkUpper(name)
{
text1 = T.box.value;
T.box.value = text1.toUpperCase();
text2 = T.box.value;
T.box.value = text2.toUpperCase();
//use this to keep the case the same if they
//click
}
function keyUp(e) {
if (Foc == "on")
{ //Netscape 4 and below does not support the delete,arrows and
if (ns4) //any other key to the right of the enter key.
{
var Z=e.which;
switch(Z)
{
case 97 : { Z =65;break;}
case 98 : { Z =66;break;}
case 99 : { Z =67;break;}
case 100 : { Z =68;break;}
case 101 : { Z =69;break;}
case 102 : { Z =70;break;}
case 103 : { Z =71;break;}
case 104 : { Z =72;break;}
case 105 : { Z =73;break;}
case 106 : { Z =74;break;}
case 107 : { Z =75;break;}
case 108 : { Z =76;break;} //changing case for Netscape
case 109 : { Z =77;break;}
case 110 : { Z =78;break;}
case 111 : { Z =79;break;}
case 112 : { Z =80;break;}
case 113 : { Z =81;break;}
case 114 : { Z =82;break;}
case 115 : { Z =83;break;}
case 116 : { Z =84;break;}
case 117 : { Z =85;break;}
case 118 : { Z =86;break;}
case 119 : { Z =87;break;}
case 120 : { Z =88;break;}
case 121 : { Z =89;break;}
case 122 : { Z =90;break;}
default : { break;}
}
fmain(Z);
}
if (ie4) {var Z=event.keyCode;fmain(Z);}
}
}
function focCheck(Obname)
{
name =Obname;
Foc="on"
}
function key2()
{
document.onkeyup = "";
w=0;
G1=0;
ltrchk=1;
G=0;
i=1; //if they click away, reset everything
v=1;
Temp="";
Z="";
o=0;
n=0;
m=0;
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KEYUP)
}
function highlight(name)
{
name.select()
//Exactly that highlights the text
}
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KEYUP)
</script>
</Head>
<body>
<h2>Combo Box</h2>
<b> The input box simulates a combo box by populating it with an array. Type in Java or JavaScript and the words will appear as you type or continue typing something that starts out the same but ends up different. If you backspace and then start typing it will pick where you left off. You can also scroll up and down through the list with the arrow keys for those words with the first letter you typed. The click event can cause a problem since we lose our position in the temp variable. Thus, when the user clicks the Temp is disabled and whatever they type in box can still be submitted with the form. Works great in Internet Explorer but due to limitations of Netscape(namely capturing keystrokes)it is a little buggy but it does work! Netscape 6 offers hope when they have a full release. </b>
<form name="T" method="post" action="http:\\davemi.webjump.com" onsubmit="mkUpper()" >
<input type="text" name="box" onfocus="focCheck(box)" onblur="key2()" onclick="Check(box)" onkeydown="Record()">You can use the up and down arrows to scroll through the selections in Internet Explorer. <br><br><br>
<input type="Text" name="box2" onfocus="focCheck(box2)" onblur="key2()" onclick="Check(box2)" onkeydown="Record()"> This second box is to demonstrate it will work for multiple inputs on one form
<br><br>
</form>
<br><br>
The Current Array:
<ol>
Fortran<br>
JAVA<br>
JAVASCRIPT<br>
J++<br>
C<br>
C++<br>
Cobol<br>
PASCAL<br>
HTML<br>
ADA<br>
VISUAL BASIC<br>
</ol>
</body>
</html>
|
