I need help with this problem. The following is my html code as well as my javascript file's contents. As the javascript as "Combobox.js"
***********************************************
<html>
<head>
<script scr="Combobox.js"></script>
<script>
var temp= new cbJSMainFunc("carsID","cars");
</script>
</head>
<body>
<form>
<p>
<select name="cars" id="carsID" onchange="temp.comboOnChange();">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
<input type="button" value="Hello world!">
</p>
</form>
<p> </p>
</body>
</html>
****************************************************
//Declarations
var arrComboOptions = new Array();
//------------ FUNCTION: cbJSMainFunc() ------------//
function cbJSMainFunc(comboBoxID, comboBoxName) {
this.activeComboBox = document.all[comboBoxID];
this.activeComboBox.selectedIndex = -1;
this.setStyle = setStyle;
this.comboOnChange = comboOnChange;
this.detectKeyEntry = detectKeyEntry;
this.getValuesByEntry = getValuesByEntry;
this.focus = focus;
this.entryComboValue = "";
var comboBoxID_Text = comboBoxID + "_text";
if (document.all[comboBoxID_Text] != null)
{
alert(" '"+comboBoxID_Text +"' is not null!\r\n");
}
var inputText = "<INPUT type='text' id=" + comboBoxID_Text + " name=" + comboBoxID_Text + " onblur='" + comboBoxName + ".detectKeyEntry()' " + " onkeyup='" + comboBoxName + ".getValuesByEntry()' " + " style='display: none; position: absolute' value='' >";
this.activeComboBox.insertAdjacentHTML("afterEnd", inputText);
this.selComboText = document.all[comboBoxID_Text];
var comboBoxID_Value = comboBoxID + "_value";
if (document.all[comboBoxID_Value] != null)
{
alert(" '" + comboBoxID_Value + "' is not null!\r\n");
}
var hiddenComboValue = "<INPUT type='hidden' "+ " id=" + comboBoxID_Value + " name=" + comboBoxID_Value + " >"; this.activeComboBox.insertAdjacentHTML("afterEnd", hiddenComboValue);
this.selComboValue = document.all[comboBoxID_Value];
arrComboOptions[arrComboOptions.length] = this;
}
//------------ FUNCTION: fish() ------------//
function detectKeyEntry() {
var thisActiveCombo = this.activeComboBox;
var comboTextEntry = this.selComboText;
var comboValueEntry = this.selComboValue;
var index;
comboValueEntry.value = comboTextEntry.value;
thisActiveCombo.selectedIndex = -1;
if (comboTextEntry.value == "") {
return;
}
var noOfOptions = thisActiveCombo.options.length;
for (index=0; index<noOfOptions; index++) {
var comboOptText = thisActiveCombo.options(index).text;
var valueTextEntry = comboTextEntry.value;
if (comboOptText == valueTextEntry) {
thisActiveCombo.selectedIndex = index;
comboValueEntry.value = thisActiveCombo.options(index).value;
return;
}
}
if (this.setUseComboValuesTrue) {
thisActiveCombo.focus();
alert("'" + comboTextEntry.value + "' is not allowed");
this.activeComboBox.selectedIndex = -1;
this.selComboText.select();
return;
}
}
//------------ FUNCTION: setStyle() ------------//
function setStyle() {
this.selComboText.style.display="none";
this.activeComboBox.style.position="static";
this.selComboText.style.posLeft = setComboPosLeft(this.activeComboBox);
this.selComboText.style.posTop = setComboPosTop(this.activeComboBox) + 1;
this.selComboText.style.posWidth = this.activeComboBox.offsetWidth - 16;
this.selComboText.style.posHeight = this.activeComboBox.offsetHeight;
this.activeComboBox.style.position ="absolute";
this.activeComboBox.style.posLeft = this.selComboText.style.posLeft;
this.activeComboBox.style.posTop = this.selComboText.style.posTop;
this.comboOffSetWidth = this.activeComboBox.offsetWidth;
var comboDimension = "rect(0 " + (this.activeComboBox.offsetWidth) + " " + this.activeComboBox.offsetHeight + " " + (this.selComboText.style.posWidth - 2 ) + ")";
this.activeComboBox.style.clip = comboDimension;
this.selComboText.style.display="";
}
//------------ FUNCTION: comboOnChange() ------------//
function comboOnChange() {
var comboSelIndex = this.activeComboBox.selectedIndex;
var comboSelText = this.activeComboBox.options[comboSelIndex];
this.selComboText.value = comboSelText.text;
this.selComboText.focus();
this.selComboText.select();
this.activeComboBox.selectedIndex=-1;
}
//------------ FUNCTION: comboOnChange() ------------//
//------------ Purpose: Allow Entry Into Combo Box ------------//
function getValuesByEntry() {
if (event.keyCode < 32) {
return;
}
var textEntered = this.selComboText.value;
var emptyString = this.entryComboValue;
var index;
if ((textEntered == "") || (textEntered == emptyString) ) {
this.entryComboValue = textEntered;
return;
}
var noOfOptions = this.activeComboBox.options.length;
var strOptions;
for (index=0; index<noOfOptions; index++) {
strOptions = this.activeComboBox.options(index).text;
if (strOptions.indexOf(textEntered) == 0) {
var checkOptionsByChar = this.activeComboBox.options(index).text;
this.selComboText.value = this.selComboText.value + checkOptionsByChar.substr(textEntered.length);
this.activeComboBox.selectedIndex = index;
this.entryComboValue = this.selComboText.value;
var entryHighlight = this.selComboText.createTextRange();
entryHighlight.moveStart("character", textEntered.length);
entryHighlight.select();
return;
}
}
}
//------------ FUNCTION: setOptionStyle() ------------//
function setOptionStyle() {
var index;
for (index=0; index < arrComboOptions.length; index++) {
arrComboOptions[index].setStyle();
}
}
***********************************************
<html>
<head>
<script scr="Combobox.js"></script>
<script>
var temp= new cbJSMainFunc("carsID","cars");
</script>
</head>
<body>
<form>
<p>
<select name="cars" id="carsID" onchange="temp.comboOnChange();">
<option value="volvo">Volvo
<option value="saab">Saab
<option value="fiat">Fiat
<option value="audi">Audi
</select>
<input type="button" value="Hello world!">
</p>
</form>
<p> </p>
</body>
</html>
****************************************************
//Declarations
var arrComboOptions = new Array();
//------------ FUNCTION: cbJSMainFunc() ------------//
function cbJSMainFunc(comboBoxID, comboBoxName) {
this.activeComboBox = document.all[comboBoxID];
this.activeComboBox.selectedIndex = -1;
this.setStyle = setStyle;
this.comboOnChange = comboOnChange;
this.detectKeyEntry = detectKeyEntry;
this.getValuesByEntry = getValuesByEntry;
this.focus = focus;
this.entryComboValue = "";
var comboBoxID_Text = comboBoxID + "_text";
if (document.all[comboBoxID_Text] != null)
{
alert(" '"+comboBoxID_Text +"' is not null!\r\n");
}
var inputText = "<INPUT type='text' id=" + comboBoxID_Text + " name=" + comboBoxID_Text + " onblur='" + comboBoxName + ".detectKeyEntry()' " + " onkeyup='" + comboBoxName + ".getValuesByEntry()' " + " style='display: none; position: absolute' value='' >";
this.activeComboBox.insertAdjacentHTML("afterEnd", inputText);
this.selComboText = document.all[comboBoxID_Text];
var comboBoxID_Value = comboBoxID + "_value";
if (document.all[comboBoxID_Value] != null)
{
alert(" '" + comboBoxID_Value + "' is not null!\r\n");
}
var hiddenComboValue = "<INPUT type='hidden' "+ " id=" + comboBoxID_Value + " name=" + comboBoxID_Value + " >"; this.activeComboBox.insertAdjacentHTML("afterEnd", hiddenComboValue);
this.selComboValue = document.all[comboBoxID_Value];
arrComboOptions[arrComboOptions.length] = this;
}
//------------ FUNCTION: fish() ------------//
function detectKeyEntry() {
var thisActiveCombo = this.activeComboBox;
var comboTextEntry = this.selComboText;
var comboValueEntry = this.selComboValue;
var index;
comboValueEntry.value = comboTextEntry.value;
thisActiveCombo.selectedIndex = -1;
if (comboTextEntry.value == "") {
return;
}
var noOfOptions = thisActiveCombo.options.length;
for (index=0; index<noOfOptions; index++) {
var comboOptText = thisActiveCombo.options(index).text;
var valueTextEntry = comboTextEntry.value;
if (comboOptText == valueTextEntry) {
thisActiveCombo.selectedIndex = index;
comboValueEntry.value = thisActiveCombo.options(index).value;
return;
}
}
if (this.setUseComboValuesTrue) {
thisActiveCombo.focus();
alert("'" + comboTextEntry.value + "' is not allowed");
this.activeComboBox.selectedIndex = -1;
this.selComboText.select();
return;
}
}
//------------ FUNCTION: setStyle() ------------//
function setStyle() {
this.selComboText.style.display="none";
this.activeComboBox.style.position="static";
this.selComboText.style.posLeft = setComboPosLeft(this.activeComboBox);
this.selComboText.style.posTop = setComboPosTop(this.activeComboBox) + 1;
this.selComboText.style.posWidth = this.activeComboBox.offsetWidth - 16;
this.selComboText.style.posHeight = this.activeComboBox.offsetHeight;
this.activeComboBox.style.position ="absolute";
this.activeComboBox.style.posLeft = this.selComboText.style.posLeft;
this.activeComboBox.style.posTop = this.selComboText.style.posTop;
this.comboOffSetWidth = this.activeComboBox.offsetWidth;
var comboDimension = "rect(0 " + (this.activeComboBox.offsetWidth) + " " + this.activeComboBox.offsetHeight + " " + (this.selComboText.style.posWidth - 2 ) + ")";
this.activeComboBox.style.clip = comboDimension;
this.selComboText.style.display="";
}
//------------ FUNCTION: comboOnChange() ------------//
function comboOnChange() {
var comboSelIndex = this.activeComboBox.selectedIndex;
var comboSelText = this.activeComboBox.options[comboSelIndex];
this.selComboText.value = comboSelText.text;
this.selComboText.focus();
this.selComboText.select();
this.activeComboBox.selectedIndex=-1;
}
//------------ FUNCTION: comboOnChange() ------------//
//------------ Purpose: Allow Entry Into Combo Box ------------//
function getValuesByEntry() {
if (event.keyCode < 32) {
return;
}
var textEntered = this.selComboText.value;
var emptyString = this.entryComboValue;
var index;
if ((textEntered == "") || (textEntered == emptyString) ) {
this.entryComboValue = textEntered;
return;
}
var noOfOptions = this.activeComboBox.options.length;
var strOptions;
for (index=0; index<noOfOptions; index++) {
strOptions = this.activeComboBox.options(index).text;
if (strOptions.indexOf(textEntered) == 0) {
var checkOptionsByChar = this.activeComboBox.options(index).text;
this.selComboText.value = this.selComboText.value + checkOptionsByChar.substr(textEntered.length);
this.activeComboBox.selectedIndex = index;
this.entryComboValue = this.selComboText.value;
var entryHighlight = this.selComboText.createTextRange();
entryHighlight.moveStart("character", textEntered.length);
entryHighlight.select();
return;
}
}
}
//------------ FUNCTION: setOptionStyle() ------------//
function setOptionStyle() {
var index;
for (index=0; index < arrComboOptions.length; index++) {
arrComboOptions[index].setStyle();
}
}
Comment