Here is where the code is - can anyone spot it, I am having a mental block
http://www.wrighter.com/music/autocomplete1.cfm
It you start typing with a t and select a painting in the drop down it works perfectly, but when you type out the whole name and hit apply it doesn't work.
When hitting the apply button, it doesnt perform the innerHTML to get assigned and I cant figure out how to do this. and have tried.
Here is the script, you can look at webpage for sourcecode.
<script language=javascript>
var objectTypes = ['Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0',
'MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
var xmlHttp;
if (window.XMLHttpRequest) {
//Browser is non-IE
xmlHttp = new XMLHttpRequest();
}
else {
for (o in objectTypes) {
try {
xmlHttp = new ActiveXObject(objectTypes[o]);
break;
} catch (ex) {//ignore exception
}
}
}
function AutoCompleteDB()
{
// set the initial values.
this.bEnd = false;
this.nCount = 0;
this.aStr = new Object;
}
AutoCompleteDB.prototype.add = function(str)
{
// increment the count value.
this.nCount++;
// if at the end of the string, flag this node as an end point.
if ( str == "" )
this.bEnd = true;
else
{
// otherwise, pull the first letter off the string
var letter = str.substring(0,1);
var rest = str.substring(1,str.length);
// and either create a child node for it or reuse an old one.
if ( !this.aStr[letter] ) this.aStr[letter] = new AutoCompleteDB();
this.aStr[letter].add(rest);
}
}
AutoCompleteDB.prototype.getCount = function(str, bExact)
{
// if end of search string, return number
if ( str == "" )
if ( this.bEnd && bExact && (this.nCount == 1) ) return 0;
else return this.nCount;
// otherwise, pull the first letter off the string
var letter = str.substring(0,1);
var rest = str.substring(1,str.length);
// and look for case-insensitive matches
var nCount = 0;
if (letter >= 0 && letter <= 9 )
{
var lNumber = letter;
if ( this.aStr[lNumber] )
nCount += this.aStr[lNumber].getCount(rest, bExact && (letter == lNumber));
}
else
{
var lLetter = letter.toLowerCase();
if ( this.aStr[lLetter] )
nCount += this.aStr[lLetter].getCount(rest, bExact && (letter == lLetter));
var uLetter = letter.toUpperCase();
if ( this.aStr[uLetter] )
nCount += this.aStr[uLetter].getCount(rest, bExact && (letter == uLetter));
}
return nCount;
}
AutoCompleteDB.prototype.getStrings = function(str1, str2, outStr)
{
if ( str1 == "" )
{
// add matching strings to the array
if ( this.bEnd )
outStr.push(str2);
// get strings for each child node
for ( var i in this.aStr )
this.aStr[i].getStrings(str1, str2 + i, outStr);
}
else
{
// pull the first letter off the string
var letter = str1.substring(0,1);
var rest = str1.substring(1,str1.length);
if (letter >= 0 && letter <= 9 )
{
var lNumber = letter;
if ( this.aStr[lNumber] )
this.aStr[lNumber].getStrings(rest, str2 + lNumber, outStr);
}
else {
// and get the case-insensitive matches.
var lLetter = letter.toLowerCase();
if ( this.aStr[lLetter] )
this.aStr[lLetter].getStrings(rest, str2 + lLetter, outStr);
var uLetter = letter.toUpperCase();
if ( this.aStr[uLetter] )
this.aStr[uLetter].getStrings(rest, str2 + uLetter, outStr);
}
}
}
function AutoComplete(aStr, oText, oDiv, nMaxSize)
{
// initialize member variables
this.oText = oText;
this.oDiv = oDiv;
this.nMaxSize = nMaxSize;
// preprocess the texts for fast access
this.db = new AutoCompleteDB();
var i, n = aStr.length;
for ( i = 0; i < n; i++ )
{
this.db.add(aStr[i]);
}
// attach handlers to the text-box
oText.AutoComplete = this;
oText.onkeyup = AutoComplete.prototype.onTextChange;
oText.onblur = AutoComplete.prototype.onTextBlur;
}
AutoComplete.prototype.onTextBlur = function()
{
this.AutoComplete.onblur();
}
AutoComplete.prototype.onblur = function()
{
this.oDiv.style.visibility = "hidden";
}
AutoComplete.prototype.onTextChange = function()
{
this.AutoComplete.onchange();
}
AutoComplete.prototype.onDivMouseDown = function()
{
if (typeof(this.innerHTML) == 'undefined') {
alert("this.innerHTML is undefined");
oText.AutoComplete = document.YourForm.theText.value;
this.innerHTML = document.YourForm.theText.value;
oText.AutoComplete = this;
alert("this.AutoComplete.oText.value ="+this.AutoComplete.oText.value);
}
else { this.AutoComplete.oText.value = this.innerHTML; }
var url="autocomplete1.cfm?Name=" + document.YourForm.theText.value;
xmlHttp.open('get', url, true);
xmlHttp.onreadystatechange = myResponseMethod;
xmlHttp.send(null);
}
function myResponseMethod() {
//readyState 4 means complete
if(xmlHttp.readyState == 4) {
if (xmlHttp.status == 200 || xmlHttp.status === 0) {
var char_id="xmlhttp_id"; //characteristic identifier of the wrapper
if (document.getElementById(char_id)) {
var obj=document.getElementById(char_id);
obj.parentNode.removeChild(obj);
}
var odiv=document.createElement("div")
odiv.id=char_id; //to prepare for removal for repetitive calls
odiv.innerHTML=xmlHttp.responseText;
document.getElementById("theItem").appendChild(odiv);
document.getElementById("theItem").style.visibility = "visible";
document.getElementById("theText").style.display = "none";
document.getElementById("theDiv").style.display = "none";
document.getElementById("theHeader").style.display = "none";
}
}
}
AutoComplete.prototype.onDivMouseOver = function()
{
this.className = "AutoCompleteHighlight";
}
AutoComplete.prototype.onDivMouseOut = function()
{
this.className = "AutoCompleteBackground";
}
AutoComplete.prototype.onchange = function()
{
var txt = this.oText.value;
// count the number of strings that match the text-box value
var nCount = this.db.getCount(txt, true);
// if a suitable number then show the popup-div
if ( (this.nMaxSize == -1 ) || (nCount > 0) ) // max size -((nCount < this.nMaxSize) ) &&
{
// clear the popup-div.
while ( this.oDiv.hasChildNodes() )
this.oDiv.removeChild(this.oDiv.firstChild);
// get all the matching strings from the AutoCompleteDB
var aStr = new Array();
this.db.getStrings(txt, "", aStr);
// add each string to the popup-div
if (aStr.length < 25)
{ var i, n = aStr.length; }
else
{ var i, n = 26 }
for ( i = 0; i < n; i++ )
{
var oDiv = document.createElement('div');
this.oDiv.appendChild(oDiv);
oDiv.innerHTML = aStr[i];
oDiv.onmousedown = AutoComplete.prototype.onDivMouseDown;
oDiv.onmouseover = AutoComplete.prototype.onDivMouseOver;
oDiv.onmouseout = AutoComplete.prototype.onDivMouseOut;
oDiv.AutoComplete = this;
}
this.oDiv.style.visibility = "visible";
}
else // hide the popup-div
{ alert("You have Finished typing the Number ");
<!--- this.innerHTML = document.YourForm.theText.value; --->
<!--- alert("this.innerHTML = "+this.innerHTML); --->
<!--- this.oDiv.innerHTML = ""; --->
this.oDiv.style.visibility = "hidden";
}
}
function createAutoComplete()
{
var aNames = <cfoutput> [#Replace(Replace(Replace(Replace(toScript(thisString , "aNames"),"\","", "ALL"), Chr(34), "", "ALL"),"aNames =", "", "ALL"), ";", "", "ALL")# ] </cfoutput>
new AutoComplete(
aNames,
document.getElementById('theText'),
document.getElementById('theDiv'),
25
);
}
</script>
