Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Need to Optimize JS to work faster in IE, any suggestions would be gre

Status
Not open for further replies.

wrighterb

Programmer
Feb 20, 2007
80
US
Need to Optimize JS to work faster in IE, any suggestions would be great!

<% out.flush(); %>
<c:import url="partList.jsp" var="importTXT" scope="application" />
<% out.flush(); %>



<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.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);
}

// 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 "+this.innerHTML); --->
this.innerHTML = document.GoForm.theText.value;
<!--- alert("this.innerHTML after setting the... "+this.innerHTML); --->
AutoComplete.oText = document.GoForm.theText.value;
<!--- alert("AutoComplete.oText ="+AutoComplete.oText); --->
AutoComplete.oText = this;
}
else { this.AutoComplete.oText.value = this.innerHTML; }
var url="MWQuickOrderForm.jsp?theText=" + document.GoForm.theText.value;
xmlHttp.open('get', url, true);
xmlHttp.onreadystatechange = myResponseMethod;
xmlHttp.send('');
}
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";

}
}
}
<!---Add Highlight Here --->
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;
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
{
this.oDiv.innerHTML = "";
this.oDiv.style.visibility = "hidden";
}
}
function createAutoComplete()
{
var words = new String("<c:eek:ut value="${importTXT}"/>")
var swords = words.split(";")
var aNames = swords ;
new AutoComplete(
aNames,
document.getElementById('theText'),
document.getElementById('theDiv'),
25
);
}
</script>
 
One way I've found to speed up JS execution when I have loops is to unroll them.

If you use document.getElementById(elementname) in functions with string literals for the element name, you can speed up your code by assigning the elements to global variables outside the functions so you can access the object without having to search for it in the DOM every time the function is called.

If you do a Google search for "optimize Javascript" you'll find quite a bit of information about this.

Lee
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top