Spotlight Search Question

[MrWelfare]

Hi Everyone,

I'm currently trying to follow an example I found in a book a while ago to try to create a spotlight (mac-like) search that filters results as one types. The script that I have works perfectly in Firefox, but does not seem to work successfully in Internet Explorer (I'm using version 7).

Here is the Javascript code I am currently using:

window.onload = initAll;
 
var xhr = false;
var statesArray = new Array();
 
function initAll() {
    document.getElementById("searchField").onkeyup = searchSuggest;
    xhr = null;
 
    // code for Mozilla, etc.
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
 
    // code for IE
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xhr != null){
        xhr.onreadystatechange=setStatesArray;
        xhr.open("GET","search.xml",true);
        xhr.send(null);
    } else {
        alert("Your browser does not support XMLHTTP.");
    }
}
 
function setStatesArray() {
  if(xhr.readyState == 4) {
    if(xhr.responseXML) {
      var allStates = xhr.responseXML.getElementsByTagName("item");
      for(var i = 0; i < allStates.length; i++){
        statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
      } // for
    } // if
    else {
      alert("There was a problem with the request " + xhr.status);
    } // else
  } // if
} // setStatesArray
 
function searchSuggest(){
  var str = document.getElementById("searchField").value;
  document.getElementById("searchField").className = "";
  if(str != "") {
    document.getElementById("popups").innerHTML = "";
    for(var i = 0; i < statesArray.length; i++) {
      var thisState = statesArray[i].nodeValue;
      if(thisState.toLowerCase().indexOf(str.toLowerCase()) == 0){
        var tempDiv = document.createElement("div");
    tempDiv.innerHTML = thisState;
    tempDiv.onclick = makeChoice;
    tempDiv.className = "suggestions";
        document.getElementById("popups").appendChild(tempDiv);
      } // if
    } // for
    var foundCt = document.getElementById("popups").childNodes.length;
    if(foundCt == 0) {
        document.getElementById("searchField").className = "error";
    } // if
  } // if
  else {
    document.getElementById("popups").innerHTML = "";
  } // else
} // searchSuggest
 
function makeChoice(evt){
  var thisDiv = (evt) ? evt.target :window.event.srcElement;
  document.getElementById("searchField").value = thisDiv.innerHTML;
  document.getElementById("popups").innerHTML = "";
 
  //Test Redirection
  if (document.getElementById("searchField").value == "Google") {
    window.location = "http://www.google.com/";
  } // if
} //makeChoice

I believe that the current problem I am having stems from one or two things. First, however, let me explain the problem.

As you can probably tell, this script is used to access a XML document containing values. Then, as a user types their search query into a text box, the script will search through the list of XML values and display the ones that match the user's query. If, however, no matches are found, the className is changed to "error" (causing the input field to turn a shade of yellow).

When I enter any value into the search field in Internet Explorer, even if it is one that should come up with a result, the search field instantly turns yellow, indicating that no matches could be found. I believe that this problem stems from the fact that the array "statesArray" has no value as when I open the javascript error console in IE, I get an error saying:

var thisState = statesArray[i].nodeValue; is null or not an object.

I've tried replacing nodeValue (which I've read to be a known cause of problems in IE) to textContent or firstChild (both of which work perfectly in Firefox), but I'm still having the problem in IE7.

If anyone can see what I'm doing wrong, information would be greatly appreciated.

Thanks,

MrWelfare

[iam_clint]

Everything looks fine to me, maybe give a link to the broken page.

[MrWelfare]

Alright. Well after inserting multiple alert statements into the code, I've discovered that the issue stems from this line of code (in IE7)

        xhr.open("GET","search.xml",true);

The only reason I can think I would be getting an "Access Denied" error in the Javascript error console in IE7 is if IE could not, for some reason, access the XML file saved on the hard drive. There are no restrictions placed on the file, so perhaps this issue is arising from the browser security end of things?

If so, does anyone know which settings to turn off/down to fix this? Or if this is not the problem, does anyone know what else it could be?

[MrWelfare]

And now, after playing around with it some more, it seems that the function setStatesArray is not even executing in IE. I placed alerts all throughout the code and tested the results. So far, it seems that Internet Explorer will execute the javascript code until line 20. (Well, I assume this is true since the alert I placed between lines 20 and 21 was displayed). However, the comments that I placed inside the function setStatesArray do not show up at all in IE.

Any help would be greatly appreciated.

Thanks (and Happy New Years! =D)

[acoder]

See this link for parsing an XML document in IE.