Below is what I have build with several different languages. It works great but I need help, I am stuck.
When you click on an item in the dropdown autocomplete div it does a mousedown function and send the item number to the xmlHttp and works awesome. Now I need to add an apply button next to it. so they can type in the complete number then hit apply and it does the same function. I cant get it to work with the script I have. The image is apply where I am trying to get this to work.
you can see an example of this at http://www.wrighter.com/music/autocomplete.cfm
AutoComplete.pr ototype.onDivMo useDown = function() does the action to xmlHttp call and sending the div info.
I cant get it to take the info from the field and do the same thing. help!
[HTML]<!--- Autocomplete information from partList.dat in same folder
partList.dat is populated by query --->
<c:import url="partList.t xt" var="importTXT"/>
<script language=javasc ript>
var objectTypes = ['Msxml2.XMLHTTP .5.0','Msxml2.X MLHTTP.4.0',
'MSXML2.XMLHTTP .3.0','MSXML2.X MLHTTP','Micros oft.XMLHTTP'];
var xmlHttp;
if (window.XMLHttp Request) {
//Browser is non-IE
xmlHttp = new XMLHttpRequest( );
}
else {
for (o in objectTypes) {
try {
xmlHttp = new ActiveXObject(o bjectTypes[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.getCo unt = 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.toLowerC ase();
if ( this.aStr[lLetter] )
nCount += this.aStr[lLetter].getCount(rest, bExact && (letter == lLetter));
var uLetter = letter.toUpperC ase();
if ( this.aStr[uLetter] )
nCount += this.aStr[uLetter].getCount(rest, bExact && (letter == uLetter));
}
return nCount;
}
AutoCompleteDB. prototype.getSt rings = function(str1, str2, outStr)
{
if ( str1 == "" )
{
// add matching strings to the array
if ( this.bEnd )
outStr.push(str 2);
// get strings for each child node
for ( var i in this.aStr )
this.aStr[i].getStrings(str 1, 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(res t, str2 + lNumber, outStr);
}
else {
// and get the case-insensitive matches.
var lLetter = letter.toLowerC ase();
if ( this.aStr[lLetter] )
this.aStr[lLetter].getStrings(res t, str2 + lLetter, outStr);
var uLetter = letter.toUpperC ase();
if ( this.aStr[uLetter] )
this.aStr[uLetter].getStrings(res t, str2 + uLetter, outStr);
}
}
}
function AutoComplete(aS tr, 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(aSt r[i]);
}
// attach handlers to the text-box
oText.AutoCompl ete = this;
oText.onkeyup = AutoComplete.pr ototype.onTextC hange;
oText.onblur = AutoComplete.pr ototype.onTextB lur;
}
AutoComplete.pr ototype.onTextB lur = function()
{
this.AutoComple te.onblur();
}
AutoComplete.pr ototype.onblur = function()
{
this.oDiv.style .visibility = "hidden";
}
AutoComplete.pr ototype.onblur = function()
{
this.oDiv.style .visibility = "hidden";
}
AutoComplete.pr ototype.onTextC hange = function()
{
this.AutoComple te.onchange();
}
AutoComplete.pr ototype.onDivMo useDown = function()
{
this.AutoComple te.oText.value = this.innerHTML;
var url="MWQuickOrd erForm.jsp?theT ext=" + document.GoForm .theText.value;
xmlHttp.open('g et', url, true);
xmlHttp.onready statechange = myResponseMetho d;
xmlHttp.send(nu ll);
}
function myResponseMetho d() {
//readyState 4 means complete
if(xmlHttp.read yState == 4) {
if (xmlHttp.status == 200 || xmlHttp.status === 0) {
var char_id="xmlhtt p_id"; //characteristic identifier of the wrapper
if (document.getEl ementById(char_ id)) {
var obj=document.ge tElementById(ch ar_id);
obj.parentNode. removeChild(obj );
}
var odiv=document.c reateElement("d iv")
odiv.id=char_id ; //to prepare for removal for repetitive calls
odiv.innerHTML= xmlHttp.respons eText;
document.getEle mentById("theIt em").appendChil d(odiv);
document.getEle mentById("theIt em").style.visi bility = "visible";
document.getEle mentById("theTe xt").style.disp lay = "none";
document.getEle mentById("theDi v").style.displ ay = "none";
document.getEle mentById("theHe ader").style.di splay = "none";
}
}
}
<!---Add Highlight Here --->
AutoComplete.pr ototype.onDivMo useOver = function()
{
this.className = "AutoCompleteHi ghlight";
this.className = this.style.back groundColor='Ye llow';
}
AutoComplete.pr ototype.onDivMo useOut = function()
{
this.className = "AutoCompleteBa ckground";
this.className = this.style.back groundColor='Wh ite';
}
AutoComplete.pr ototype.onchang e = function()
{
var txt = this.oText.valu e;
// count the number of strings that match the text-box value
var nCount = this.db.getCoun t(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.hasCh ildNodes() )
this.oDiv.remov eChild(this.oDi v.firstChild);
// get all the matching strings from the AutoCompleteDB
var aStr = new Array();
this.db.getStri ngs(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.create Element('div');
this.oDiv.appen dChild(oDiv);
oDiv.innerHTML = aStr[i];
oDiv.onmousedow n = AutoComplete.pr ototype.onDivMo useDown;
oDiv.onmouseove r = AutoComplete.pr ototype.onDivMo useOver;
oDiv.onmouseout = AutoComplete.pr ototype.onDivMo useOut;
oDiv.onblur = AutoComplete.pr ototype.onTextB lur;
oDiv.AutoComple te = this;
}
this.oDiv.style .visibility = "visible";
}
else // hide the popup-div
{
this.oDiv.inner HTML = "";
this.oDiv.style .visibility = "hidden";
}
}
function createAutoCompl ete()
{
var words = new String("<c:out value="${import TXT}"/>")
var swords = words.split(";" )
var aNames = swords ;
new AutoComplete(
aNames,
document.getEle mentById('theTe xt'),
document.getEle mentById('theDi v'),
35
);
}
</script>
<body onload="documen t.getElementByI d('theText').fo cus(); createAutoCompl ete();">
<form name="GoForm">
<%
String theText = null;
if (request.getPar ameter("theText ") == null) {
%>
<div id="theHeader" >
<table>
<tr><td colspan="2">- Start Typing the Product Number -</td></tr>
<tr><td><inpu t vspace="6" name="theText" id="theText" type="text" autocomplete="o ff"></td><td><a href="" onClick="AutoCo mplete.prototyp e.onDivMouseDow n();"><img src="<c:out value="${images Path}"/>/btn/btn_apply.gif" alt="Apply" border="0" /></a></td></tr>
</table>
</div>
<div id="theDiv" style="width:15 0px; padding-right:4px;paddi ng-left:4px;visibi lity:hidden;bor der:solid green 2px;background-color:white;z-index:1">
</div>
<%
}
%>
</form>
<div id="theItem" class="borleftb lue">
</div>[/HTML]
When you click on an item in the dropdown autocomplete div it does a mousedown function and send the item number to the xmlHttp and works awesome. Now I need to add an apply button next to it. so they can type in the complete number then hit apply and it does the same function. I cant get it to work with the script I have. The image is apply where I am trying to get this to work.
you can see an example of this at http://www.wrighter.com/music/autocomplete.cfm
AutoComplete.pr ototype.onDivMo useDown = function() does the action to xmlHttp call and sending the div info.
I cant get it to take the info from the field and do the same thing. help!
[HTML]<!--- Autocomplete information from partList.dat in same folder
partList.dat is populated by query --->
<c:import url="partList.t xt" var="importTXT"/>
<script language=javasc ript>
var objectTypes = ['Msxml2.XMLHTTP .5.0','Msxml2.X MLHTTP.4.0',
'MSXML2.XMLHTTP .3.0','MSXML2.X MLHTTP','Micros oft.XMLHTTP'];
var xmlHttp;
if (window.XMLHttp Request) {
//Browser is non-IE
xmlHttp = new XMLHttpRequest( );
}
else {
for (o in objectTypes) {
try {
xmlHttp = new ActiveXObject(o bjectTypes[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.getCo unt = 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.toLowerC ase();
if ( this.aStr[lLetter] )
nCount += this.aStr[lLetter].getCount(rest, bExact && (letter == lLetter));
var uLetter = letter.toUpperC ase();
if ( this.aStr[uLetter] )
nCount += this.aStr[uLetter].getCount(rest, bExact && (letter == uLetter));
}
return nCount;
}
AutoCompleteDB. prototype.getSt rings = function(str1, str2, outStr)
{
if ( str1 == "" )
{
// add matching strings to the array
if ( this.bEnd )
outStr.push(str 2);
// get strings for each child node
for ( var i in this.aStr )
this.aStr[i].getStrings(str 1, 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(res t, str2 + lNumber, outStr);
}
else {
// and get the case-insensitive matches.
var lLetter = letter.toLowerC ase();
if ( this.aStr[lLetter] )
this.aStr[lLetter].getStrings(res t, str2 + lLetter, outStr);
var uLetter = letter.toUpperC ase();
if ( this.aStr[uLetter] )
this.aStr[uLetter].getStrings(res t, str2 + uLetter, outStr);
}
}
}
function AutoComplete(aS tr, 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(aSt r[i]);
}
// attach handlers to the text-box
oText.AutoCompl ete = this;
oText.onkeyup = AutoComplete.pr ototype.onTextC hange;
oText.onblur = AutoComplete.pr ototype.onTextB lur;
}
AutoComplete.pr ototype.onTextB lur = function()
{
this.AutoComple te.onblur();
}
AutoComplete.pr ototype.onblur = function()
{
this.oDiv.style .visibility = "hidden";
}
AutoComplete.pr ototype.onblur = function()
{
this.oDiv.style .visibility = "hidden";
}
AutoComplete.pr ototype.onTextC hange = function()
{
this.AutoComple te.onchange();
}
AutoComplete.pr ototype.onDivMo useDown = function()
{
this.AutoComple te.oText.value = this.innerHTML;
var url="MWQuickOrd erForm.jsp?theT ext=" + document.GoForm .theText.value;
xmlHttp.open('g et', url, true);
xmlHttp.onready statechange = myResponseMetho d;
xmlHttp.send(nu ll);
}
function myResponseMetho d() {
//readyState 4 means complete
if(xmlHttp.read yState == 4) {
if (xmlHttp.status == 200 || xmlHttp.status === 0) {
var char_id="xmlhtt p_id"; //characteristic identifier of the wrapper
if (document.getEl ementById(char_ id)) {
var obj=document.ge tElementById(ch ar_id);
obj.parentNode. removeChild(obj );
}
var odiv=document.c reateElement("d iv")
odiv.id=char_id ; //to prepare for removal for repetitive calls
odiv.innerHTML= xmlHttp.respons eText;
document.getEle mentById("theIt em").appendChil d(odiv);
document.getEle mentById("theIt em").style.visi bility = "visible";
document.getEle mentById("theTe xt").style.disp lay = "none";
document.getEle mentById("theDi v").style.displ ay = "none";
document.getEle mentById("theHe ader").style.di splay = "none";
}
}
}
<!---Add Highlight Here --->
AutoComplete.pr ototype.onDivMo useOver = function()
{
this.className = "AutoCompleteHi ghlight";
this.className = this.style.back groundColor='Ye llow';
}
AutoComplete.pr ototype.onDivMo useOut = function()
{
this.className = "AutoCompleteBa ckground";
this.className = this.style.back groundColor='Wh ite';
}
AutoComplete.pr ototype.onchang e = function()
{
var txt = this.oText.valu e;
// count the number of strings that match the text-box value
var nCount = this.db.getCoun t(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.hasCh ildNodes() )
this.oDiv.remov eChild(this.oDi v.firstChild);
// get all the matching strings from the AutoCompleteDB
var aStr = new Array();
this.db.getStri ngs(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.create Element('div');
this.oDiv.appen dChild(oDiv);
oDiv.innerHTML = aStr[i];
oDiv.onmousedow n = AutoComplete.pr ototype.onDivMo useDown;
oDiv.onmouseove r = AutoComplete.pr ototype.onDivMo useOver;
oDiv.onmouseout = AutoComplete.pr ototype.onDivMo useOut;
oDiv.onblur = AutoComplete.pr ototype.onTextB lur;
oDiv.AutoComple te = this;
}
this.oDiv.style .visibility = "visible";
}
else // hide the popup-div
{
this.oDiv.inner HTML = "";
this.oDiv.style .visibility = "hidden";
}
}
function createAutoCompl ete()
{
var words = new String("<c:out value="${import TXT}"/>")
var swords = words.split(";" )
var aNames = swords ;
new AutoComplete(
aNames,
document.getEle mentById('theTe xt'),
document.getEle mentById('theDi v'),
35
);
}
</script>
<body onload="documen t.getElementByI d('theText').fo cus(); createAutoCompl ete();">
<form name="GoForm">
<%
String theText = null;
if (request.getPar ameter("theText ") == null) {
%>
<div id="theHeader" >
<table>
<tr><td colspan="2">- Start Typing the Product Number -</td></tr>
<tr><td><inpu t vspace="6" name="theText" id="theText" type="text" autocomplete="o ff"></td><td><a href="" onClick="AutoCo mplete.prototyp e.onDivMouseDow n();"><img src="<c:out value="${images Path}"/>/btn/btn_apply.gif" alt="Apply" border="0" /></a></td></tr>
</table>
</div>
<div id="theDiv" style="width:15 0px; padding-right:4px;paddi ng-left:4px;visibi lity:hidden;bor der:solid green 2px;background-color:white;z-index:1">
</div>
<%
}
%>
</form>
<div id="theItem" class="borleftb lue">
</div>[/HTML]
Comment