*************************HERE'S THE HTML*******************************
<!---Author: Victor Sanchez --->
<!---Date: November 25, 2003 --->
<!---Description: The following file demonstrates the ease with which one can implement a "SMART SEARCH" select box
by using the attached "smartSelect.js" library. Here are the steps necessary to implement the select box:
1. Declare two input text fields and give them a name. For example fruitPattern, fruitsFound.
2. Declare a <SELECT> and give it a name. For example, fruitSelect
3. Within the body of a <script> tag, create and initialize a new array with all the available values that will
be used in the select box. For example...
<script language="_javascript_">
// Global array that will store all possible values that will serve as options in the select box...
var fruitArray = new Array();
fruitArray[0] = "Orange";
fruitArray[1] = "Apple";
fruitArray[2] = "Banana";
.
.
fruitArray[n] = "nth fruit name";
</script>
4. In the <BODY> tag, give focus to, in this case, the fruitPattern text field in order to refresh the list
during the onLoad event.
5. Within the <INPUT> tag of the fruitPattern, call the updateOptions() function during both the onFocus and
onKeyUp events. The arguments that must be passed into this function are as in order as follows:
I. this [self-reference]
II. fruitSelect [reference to the select object in question]
III. fruitArray [reference to the global array containing all the select's options]
IV. n [a number representing the number of visible options the select box is to have]
V. fruitsFound [reference to the input text field used to display how many matches exist during a search]
VI. widthString [a string containing the style width specification of the select box. example:
"200px" or "100pt", etc..]
6. Finally, Don"t forget to include the smartSelect.js file in the current page.
--->
<HTML>
<HEAD>
<TITLE>Dynamic Select</TITLE>
<style>
select{width: 220px;}
.inputText{width: 220px; border-color:#0000FF; text-transform: uppercase}
.inputText2{width: 50px; border-color:red; text-align: center}
body{background:silver}
</style>
<script language="_javascript_" src=""> </HEAD>
<BODY > <center>
<table border="0" width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<FORM name=theForm>
<table border="3" bordercolor="gray" align="center" cellpadding="6" cellspacing="0">
<tr>
<td align="center">
<b>Enter some letters to limit the <font color="navy"><b>SONG</b></font> list:</b><br>
<INPUT class="inputText" type="text" name="songPattern"
songSelect, songArray, 10, songsFound, '700px')"
songSelect, songArray, 10, songsFound, '700px')"><br>
<SELECT name="songSelect" multiple > Available Options: <input class="inputText2" type="text" name="songsFound"
</td>
</tr>
<tr>
<td align="center">
<b>Enter some letters to limit the <font color="navy"><b>COLOR</b></font> list:</b><br>
<INPUT class="inputText" type="text" name="colorPattern"
colorSelect, colorArray, 5, colorsFound, '500px')"
colorSelect, colorArray, 5, colorsFound, '500px')"><br>
<SELECT name="colorSelect" multiple > Available Options: <input class="inputText2" type="text" name="colorsFound" > </td>
</tr>
<tr>
<td align="center">
<b>Enter some letters to limit the <font color="navy"><b>CHEESE</b></font> list:</b><br>
<INPUT class="inputText" type="text" name="cheesePattern"
cheeseSelect, cheeseArray, 5, cheesesFound, '300px')"
cheeseSelect, cheeseArray, 5, cheesesFound, '300px')"><br>
<SELECT name="cheeseSelect" multiple > Available Options: <input class="inputText2" type="text" name="cheesesFound"
</td>
</tr>
</table>
</FORM>
</td>
</tr>
</table>
</b>
</center>
</BODY>
<script language="_javascript_">
// Create a global array that is used as the complete set of options in the "SmartSelect" box...
var cheeseArray = new Array();
cheeseArray[0] = "Swis's";
cheeseArray[1] = "Provolone";
cheeseArray[2] = "American";
cheeseArray[3] = "Muenster";
cheeseArray[4] = "String";
cheeseArray[5] = "Parmesan";
cheeseArray[6] = "Colby Jack";
cheeseArray[7] = "Cheddar";
cheeseArray[8] = "Limburger";
cheeseArray[9] = "Cottage";
cheeseArray.sort();
</script>
<script language="_javascript_">
// Create a global array that is used as the complete set of options in the "SmartSelect" box...
var colorArray = new Array();
colorArray[0] = "Red";
colorArray[1] = "Blue";
colorArray[2] = "Green";
colorArray[3] = "Purple";
colorArray[4] = "Gray";
colorArray[5] = "Yellow";
colorArray[6] = "White";
colorArray[7] = "Black";
colorArray.sort();
</script>
<script language="_javascript_">
// Global array of songs...
songArray = new Array();
songArray[0] = "Sugar Sugar - Archies";
songArray[1] = "Natural Woman - Aretha Franklin";
songArray[2] = "Stand By Me - BB King";
songArray[3] = "California Girls - Beach Boys";
songArray[4] = "Fun, Fun, Fun - Beach Boys";
songArray[5] = "I Get Around - Beach Boys";
songArray[6] = "Wouldn't It Be Nice - Beach Boys";
songArray[7] = "Rock Around The Clock - Bill Haley and the Comets";
songArray[8] = "That'll Be The Day - Buddy Holly";
songArray[9] = "Down On The Corner - CCR";
songArray[10] = "He's So Fine [60s Oldies] - Chiffons";
songArray[11] = "The Twist - Chubby Checker";
songArray[12] = "Johnny B Goode - Chuck Berry";
songArray[13] = "A Teenager In Love - Dion & The Belmonts";
songArray[14] = "iWhy Must I Be A Teenager In Love - Dion And The Belmonts";
songArray[15] = "On Broadway - Drifters";
songArray[16] = "All Shook Up - Elvis Presley";
songArray[17] = "Don't Be Cruel - Elvis Presley";
songArray[18] = "Hound Dog - Elvis Presley";
songArray[19] = "Suspicious Minds - Elvis Presley";
songArray[20] = "Fats_Domino-The_Fat_Man_Sings_Live-1-Blueberry_Hill.mp3";
songArray[21] = "Rescue Me - Fontella Bass";
songArray[22] = "Build Me Up Buttercup - Foundations";
songArray[23] = "Big Girls Don't Cry - Four Seasons";
songArray[24] = "I Can't Help Myself - Four Tops";
songArray[25] = "Why do fools fall in love - Frankie Lamon";
songArray[26] = "Can't take my eyes off you - Frankie Vali";
songArray[27] = "Its My Party - Gore, Leslie";
songArray[28] = "I'm Into Something Good - Herman and the Hermits";
songArray[29] = "Twist and Shout - Isley Brothers";
</script>
</HTML>
*************************HERE'S THE _javascript_*******************************
// _javascript_ Document
document. // work together to analyze keystrokes
currentField = null;
blnIsClickable = false;
function setCurrentField()
{
currentField = arguments[0];
if(arguments.length == 2)
{
blnIsClickable = arguments[1];
}
else
{
blnIsClickable = false;
}
}
function tabOnEnter()
{
var keyPressed = window.event.keyCode;
if(keyPressed == 13)
{
if(blnIsClickable)
{
currentField.click();
}
else
{
var top = currentField.form.elements.length;
for(x = 0; x < top; x++)
{
if(currentField == currentField.form.elements[x])
{
// Give focus to next field...If last item, give focus to first...
if(currentField.form.elements.length != x+1)
{
currentField.form.elements[x+1].focus();
}
else
{
// Go to first item...
currentField.form.elements[0].focus();
}
return false;
}
}
}
}
}
// Replaces contents of the selectField with the contents of the new array provided...
function updateSelect(selectField, newArray, numOptions)
{
//Clear contents first...
for(var i = 0; i < selectField.length; i++)
{
selectField.remove(0);
if(selectField.size > 1)
selectField.size--;
}
//Refresh contents...
selectField.length = 0;
for(var i = 0; i < newArray.length; i++)
{
var newOpt = document.createElement("OPTION");
newOpt.text = newArray[i];
newOpt.value = newArray[i];
selectField.add(newOpt);
}
// Set the number of visible options in the select box...
selectField.size = numOptions;
}
//Function selects the list of items that match the current string in the field...
function updateOptions(txtPattern, selectField, globalArrayName, numOptions, matchesFound, selectWidth)
{
var counter = 0;
var strPattern = txtPattern.value;
// Replace special 'regular _expression_ special characters' with themselves preceeded by an escape character...
strPattern = strPattern.replace(/([\(\)\/\\\.\*\+\?\|\[\]\{\}])/g, "\\$1");
var currentPattern = new RegExp(eval('/.*' + strPattern + '.*/i')); // Case insensitive...
var tempArray = new Array();
//Regular _expression_ to select those items in optionsList[] that should be included...
for(var i = 0; i < globalArrayName.length; i++)
{
if(currentPattern.test(globalArrayName[i]) && globalArrayName[i].length > 0)
{
tempArray[counter] = globalArrayName[i];
counter++;
}
}
//Update the list...
updateSelect(selectField, tempArray, numOptions);
selectField.style.width = selectWidth;
matchesFound.value = selectField.length;
}
[Todays Threads] [This Message] [Subscription] [Fast Unsubscribe] [User Settings]
