聚光灯搜索问题
嗨,大家好, 我目前正在尝试遵循我一段时间前在书中发现的一个示例,以尝试创建一个聚光灯(类似于Mac的)搜索,以过滤为一种类型. 我在Firefox中完美工作的脚本,但似乎在Internet Explorer中无法成功使用(我正在使用版本7). 这是我目前正在使用的JavaScript代码:
选择 | 换行 | 行号
- 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
我相信我目前的问题源于一两个事情. 但是,首先,让我解释一下这个问题. 如您所知,此脚本用于访问包含值的XML文档. 然后,当用户将其搜索查询键入文本框时,脚本将搜索XML值列表,并显示与用户查询的相匹配的脚本. 但是,如果找不到匹配项,则将类名称更改为"错误"(导致输入字段变成黄色的阴影). 当我在Internet Explorer中的搜索字段中输入任何值时,即使是应该提出结果的值,搜索字段也会立即变黄,表明找不到匹配项. 我相信这个问题源于以下事实:数组" statesArray"没有价值,就像我在IE中打开JavaScript错误控制台时,我会发现一个错误:
选择 | 换行 | 行号
- var thisState = statesArray[i].nodeValue; is null or not an object.
我已经尝试将NodeValue(我读过是IE中的已知原因)替换为TextContent或FirstChild(它们在Firefox中都可以正常工作),但是我仍然在IE7中遇到问题. 如果有人能看到我在做错什么,那么将不胜感激. 谢谢, Mrwelfare