聚光灯搜索问题

嗨,大家好, 我目前正在尝试遵循我一段时间前在书中发现的一个示例,以尝试创建一个聚光灯(类似于Mac的)搜索,以过滤为一种类型. 我在Firefox中完美工作的脚本,但似乎在Internet Explorer中无法成功使用(我正在使用版本7). 这是我目前正在使用的JavaScript代码:

选择 | 换行 | 行号
  1. window.onload = initAll;
  2.  
  3. var xhr = false;
  4. var statesArray = new Array();
  5.  
  6. function initAll() {
  7.     document.getElementById("searchField").onkeyup = searchSuggest;
  8.     xhr = null;
  9.  
  10.     // code for Mozilla, etc.
  11.     if (window.XMLHttpRequest) {
  12.         xhr = new XMLHttpRequest();
  13.     }
  14.  
  15.     // code for IE
  16.     else if (window.ActiveXObject) {
  17.         xhr = new ActiveXObject("Microsoft.XMLHTTP");
  18.     }
  19.     if (xhr != null){
  20.         xhr.onreadystatechange=setStatesArray;
  21.         xhr.open("GET","search.xml",true);
  22.         xhr.send(null);
  23.     } else {
  24.         alert("Your browser does not support XMLHTTP.");
  25.     }
  26. }
  27.  
  28. function setStatesArray() {
  29.   if(xhr.readyState == 4) {
  30.     if(xhr.responseXML) {
  31.       var allStates = xhr.responseXML.getElementsByTagName("item");
  32.       for(var i = 0; i < allStates.length; i++){
  33.         statesArray[i] = allStates[i].getElementsByTagName("label")[0].firstChild;
  34.       } // for
  35.     } // if
  36.     else {
  37.       alert("There was a problem with the request " + xhr.status);
  38.     } // else
  39.   } // if
  40. } // setStatesArray
  41.  
  42. function searchSuggest(){
  43.   var str = document.getElementById("searchField").value;
  44.   document.getElementById("searchField").className = "";
  45.   if(str != "") {
  46.     document.getElementById("popups").innerHTML = "";
  47.     for(var i = 0; i < statesArray.length; i++) {
  48.       var thisState = statesArray[i].nodeValue;
  49.       if(thisState.toLowerCase().indexOf(str.toLowerCase()) == 0){
  50.         var tempDiv = document.createElement("div");
  51.     tempDiv.innerHTML = thisState;
  52.     tempDiv.onclick = makeChoice;
  53.     tempDiv.className = "suggestions";
  54.         document.getElementById("popups").appendChild(tempDiv);
  55.       } // if
  56.     } // for
  57.     var foundCt = document.getElementById("popups").childNodes.length;
  58.     if(foundCt == 0) {
  59.         document.getElementById("searchField").className = "error";
  60.     } // if
  61.   } // if
  62.   else {
  63.     document.getElementById("popups").innerHTML = "";
  64.   } // else
  65. } // searchSuggest
  66.  
  67. function makeChoice(evt){
  68.   var thisDiv = (evt) ? evt.target :window.event.srcElement;
  69.   document.getElementById("searchField").value = thisDiv.innerHTML;
  70.   document.getElementById("popups").innerHTML = "";
  71.  
  72.   //Test Redirection
  73.   if (document.getElementById("searchField").value == "Google") {
  74.     window.location = "http://www.google.com/";
  75.   } // if
  76. } //makeChoice

我相信我目前的问题源于一两个事情. 但是,首先,让我解释一下这个问题. 如您所知,此脚本用于访问包含值的XML文档. 然后,当用户将其搜索查询键入文本框时,脚本将搜索XML值列表,并显示与用户查询的相匹配的脚本. 但是,如果找不到匹配项,则将类名称更改为"错误"(导致输入字段变成黄色的阴影). 当我在Internet Explorer中的搜索字段中输入任何值时,即使是应该提出结果的值,搜索字段也会立即变黄,表明找不到匹配项. 我相信这个问题源于以下事实:数组" statesArray"没有价值,就像我在IE中打开JavaScript错误控制台时,我会发现一个错误:

选择 | 换行 | 行号
  1. var thisState = statesArray[i].nodeValue; is null or not an object.

我已经尝试将NodeValue(我读过是IE中的已知原因)替换为TextContent或FirstChild(它们在Firefox中都可以正常工作),但是我仍然在IE7中遇到问题. 如果有人能看到我在做错什么,那么将不胜感激. 谢谢, Mrwelfare

# 回答1

一切对我来说都很好,也许给出了一个折断页面的链接.
# 回答2

好吧. 好吧,在将多个警报语句插入代码之后,我发现该问题源于这条代码(在IE7中)

选择 | 换行 | 行号
  1.         xhr.open("GET","search.xml",true);

我认为我会在IE7中的JavaScript错误控制台中获得"访问拒绝"错误的唯一原因是,如果IE无法出于某种原因无法访问保存在硬盘驱动器上的XML文件. 文件上没有任何限制,因此也许此问题是由于事物的浏览器安全性而引起的? 如果是这样,有人知道要关闭/倒闭以解决哪些设置吗? 或者,如果这不是问题,是否有人知道它可能是什么?

# 回答3

而现在,在进行了更多操作之后,似乎SetStatesArray甚至没有在IE中执行功能. 我在整个代码中发布了所有警报,并测试了结果. 到目前为止,似乎Internet Explorer将执行JavaScript代码,直到第20行. 但是,我在函数SetStatesArray中放置的评论根本不会在IE中显示. 任何帮助将不胜感激. 谢谢(新年快乐!= D)
# 回答4

看 这个链接 用于在IE中解析XML文档.

标签: Javascript

添加新评论