I am trying to implement the double click event on a child element of an autocomplete text box. I can assign the ondblclick to the div but when I double click the innerHTML shows all of the child elements and not the one I double clicked on. See the code below:
var aStr2 = new Array("computer - Plain IA", "computer - Plain JSOC", "communication - Plain IA", "condor - Plain IA");
function AutoComplete(oText) {
// initialize member variables
this.oText = oText; // the text box
this.oDiv = document.getElementById("acdiv"); // oDiv; // a hidden
for the popup auto-complete
this.nMaxSize = 30;
this.aStr = new Array(5);
this.aStrx = new Array(5);
this.aStr3 = aStr2;
// preprocess the texts for fast access
var i, n = this.oText.value.length;
for (i = 0; i < aStr2.length; i++) {
this.aStrx[i] = aStr2[i];
}
this.nCount = this.oText.value.length;
// if a suitable number then show the popup-div
if ((this.nMaxSize == -1) || ((this.nCount < this.nMaxSize) && (this.nCount > 0))) {
// clear the popup div.
while (this.oDiv.hasChildNodes())
this.oDiv.removeChild(this.oDiv.firstChild);
// get all the matching strings from the AutoCompleteDB
for (i = 0; this.aStr3[i] != null; i++) {
if (this.aStr3[i].indexOf(this.oText.value) == -1) {
delete this.aStrx[i];
}
}
// add each string to the popup-div
var i, n = aStrx.length;
for (i = 0; i < n; i++) {
var oDiv2 = document.createElement('div');
//debugger;
oDiv.appendChild(oDiv2);
if (aStrx[i] != null) {
oDiv2.innerHTML = aStrx[i];
}
oDiv2.onmousedown = AutoComplete.prototype.onDivMouseDown;
oDiv2.onmouseover = AutoComplete.prototype.onDivMouseOver;
oDiv2.onmouseout = AutoComplete.prototype.onDivMouseOut;
this.oDiv = oDiv2;
this.oDiv.style.visibility = "visible";
this.oDiv.style.color = "Black";
this.oDiv.style.background = "Yellow";
}
}
else // hide the popup-div
{
this.oDiv.innerHTML = "";
this.oDiv.style.visibility = "hidden";
}
}
AutoComplete.prototype. önblur = function () {
this.oDiv.style.visibility = "hidden";
}
function dblclick() {
// debugger
alert("hello");
}