UPDATED:
I get theTextBox2 has no properties error.
Please see more detailed below.
Here are the *.php file and the script file:
[PHP]
<html>
<head>
<style type="text/css">
...
</style>
<?
//fill the theOptions array with the values form the database
?>
//How String Should Match
var ignoreCase = true; //Ignore upper and lower cases
var matchAnywhere = false; //Match pattern anywhere is string
//Match TextBox Width
var matchTextBoxWidth = true; //False uses CSS value in div.spanTextDropdown
//Visible Time for options menu to be open when untouched
var theVisibleTime = 1500;
//Show Matching Data Message
var ShowNoMatchMessage = true;
var noMatchingDataMessage = "No Matching Data";
var theTextBox2;
//Use Timeout
var useTimeout = false; //false uses onblur
//Add reference to the element you want to add this too.
function addHandler()
{
document.Form1.name.onkeyup = GiveOptions
document.Form1.name.onblur = StartTimeout;
if(navigator.userAgent.toLowerCase().indexOf("opera") != -1)document.Form1.name.onkeypress = GiveOptions; //Fix for Opera!
var theTextBox2 = document.Form1.name2;
}
</script>
<!-- Reference the JavaScript File -->
<script type="text/javascript" src="autocomplete.js"></script>
</HEAD>
<?
PRINT "<body BGCOLOR=\"SILVER\" onload=\"addHandler()\">\n";
PRINT "<FORM NAME=\"Form1\" AUTOCOMPLETE=\"off\" METHOD=\"POST\" ACTION=\"whatever.php\">\n";
PRINT "<TABLE>\n";
PRINT "<TR>\n";
PRINT "<TD>Name:</TD>\n";
PRINT "<TD><INPUT TYPE=text NAME=\"name\" VALUE=\"$name\"></TD>\n";
PRINT "</TR>\n";
PRINT "<TR>\n";
PRINT "<TD>Name2:</TD>\n";
PRINT "<TD><INPUT TYPE=text NAME=\"name2\" VALUE=\"$name2\"></TD>\n";
PRINT "</TR>\n";
PRINT "</TABLE>\n";
PRINT "<BR>\n";
PRINT "<INPUT TYPE=submit VALUE=\"OK\">\n";
PRINT "</FORM>\n";
PRINT "</HTML>\n";
[/PHP]
var regExFlags = "";
if(ignoreCase)
regExFlags = "i";
var regExAny = "";
if(!matchAnywhere)
regExAny = "^";
//Writes the div element to the page
if(useTimeout)
{
...
}
var theTextBox;
var theTextBox2;
var currentValueSelected = -1;
//Function recieves input from key press on text field
function GiveOptions(e)
{
if(useTimeout)
{
if(iAmTiming)EraseTimeout();
StartTimeout();
}
var nbr = 1;
//Grab key press event
if(document.all)
{ //IE
nbr = event.keyCode;
theTextBox = event.srcElement;
}
else
{ //Mozilla
nbr = e.which;
theTextBox = e.target;
}
xElem = theTextBox;
if(theTextBox.value.length < 2)
{
HideTheBox();
return false;
}
if(nbr==13)
{ //Enter Key
GrabHighlighted();
xElem.blur();
return false;
}
else
if(nbr==38)
{ //Up Arrow
MoveHighlight(-1);
return false;
}
else
if(nbr==40)
{ //Down Arrow
MoveHighlight(1);
return false;
}
else{}
var theText = xElem.value;
SetElementPostion(xElem,"divOutput");
var theMatches = new Array();
if(theText.length > 1)
{
theMatches = MakeMatches(theText,xElem.name); //Determine matched array elements
theMatches = theMatches.join().replace(/\,/gi,""); //Turn Array into String
document.getElementById("divOutput").innerHTML = theMatches; //Set the document innerHTML
if(theMatches.length>0)
{
document.getElementById("divOutput").innerHTML = theMatches; document.getElementById("OptionsList_0").className="spanHighElement"; //make first item selected
currentValueSelected = 0;
}
else
{
currentValueSelected = -1; //Remove any selection index
if(ShowNoMatchMessage)
document.getElementById("divOutput").innerHTML = "<span class='noMatchData'>" + noMatchingDataMessage + "</span>";
else
HideTheBox();
}
}
}
//Variable used to number span element ids
var countForId = 0;
//Find all of the matches in the string
function MakeMatches(xCompareStr,xElemId)
{
...
return matchArray
}
var iAmTiming = false;
//Sets the position of the div under the text box in focus
function SetElementPostion(xElement,xPosElement)
{
...
}
//Variables for create underline
var undeStart = "<span class='spanMatchText'>";
var undeEnd = "</span>";
//variables for span elements
var selectSpanStart = "<span style='width:100%;display:block;' class='spanNormalElement' onmouseover='SetHighColor(this)' ";
var selectSpanEnd ="</span>";
//Function makes underline under the text
function CreateUnderline(xStr,xTextMatch,xVal)
{
...
}
//function sets the textbox and hidden textbox values
function SetText(xVal)
{
theTextBox.value = theOptions[xVal][0]; //set text value
theTextBox2.value = theOptions[xVal][1];
document.getElementById("divOutput").style.display = "none"; //hide the options list
currentValueSelected = -1; //remove the selected index
}
//Gets value when option is clicked
function GrabHighlighted()
{
if(currentValueSelected != -1)
{
xVal = document.getElementById("OptionsList_" + currentValueSelected).getAttribute("theArrayNumber"); //grab the array index of the value
SetText(xVal); //set value
document.getElementById("divOutput").style.display = "none"; //hide the options list
}
}
//Set High color when moused over
function SetHighColor(xElem)
{
...
}
//Handles the up an down arrows for moving highlight color
function MoveHighlight(xDir)
{
...
}
function HideTheBox()
{
..
}
function EraseTimeout()
{
..
}
function StartTimeout()
{
}
Unsolved 
Offline 
