利用PHP＋JavaScript打造AJAX搜索窗3

     图2.向用户提示数据正在加载中
  
  　　完成这些元素之后，剩下的就是把它们添加到divSearchBox元素中：
  
  divSearchBox.className = "ajaxWebSearchBox";
  divSearchBox.appendChild(divHeading);
  divSearchBox.appendChild(divResultsPane);
  document.body.appendChild(divSearchBox);
  
  　　这段代码负责把divHeading和divResultsPane元素添加到搜索窗，并且把搜索窗添加到页面。
  
  　　在drawResultBox()中的最后一步是确定新绘制的小框的位置并且把divSearchBox返回到它的调用者：
  
  msnWebSearch.drawResultBox = function (e) {
  　var divSearchBox= document.createElement("div");
  　var divHeading = document.createElement("div");
  　var divResultsPane = document.createElement("div");
  　var aCloseLink = document.createElement("a");
  　aCloseLink.href = "#";
  　aCloseLink.className = "ajaxWebSearchCloseLink";
  　aCloseLink.onclick = this.close;
  　aCloseLink.appendChild(document.createTextNode("X"));
  　divHeading.className = "ajaxWebSearchHeading";
  　divHeading.appendChild(document.createTextNode("MSN Search Results"));
  　divHeading.appendChild(aCloseLink);
  　var divLoading = document.createElement("div");
  　divLoading.appendChild(document.createTextNode("Loading Search Feed"));
  　divResultsPane.className = "ajaxWebSearchResults";
  　divResultsPane.appendChild(divLoading);
  　divSearchBox.className = "ajaxWebSearchBox";
  　divSearchBox.appendChild(divHeading);
  　divSearchBox.appendChild(divResultsPane);
  　document.body.appendChild(divSearchBox);
  　this.position(e， divSearchBox);
  　return divSearchBox;
  };
  
  　　通过这种方式建立msnWebSearch对象后，必须把divSearchBox返回到它的调用者以便进行其它操作。你可以已经猜出，position()方法负责放置该搜索框。它接受两个参数：传递到drawResultBox()的事件对象和divSearchBox元素：
  
  msnWebSearch.position = function (e， divSearchBox) {
  　var x = e.clientX + document.documentElement.scrollLeft;
  　var y = e.clientY + document.documentElement.scrollTop;
  　divSearchBox.style.left = x + "px";
  　divSearchBox.style.top = y + "px";
  };
  
  　　前两行代码得到左边和顶部位置，用于放置搜索结果框。执行这个操作要求使用两种信息。首先是鼠标的x和y坐标（这些信息被存储在clientX和clientY属性）。
  
  　　然而，这些坐标还不足以正确定位结果框，因为clientX和clientY属性返回相对于浏览器窗口客户区的鼠标位置，而不是页面中的实际坐标。考虑到这一点，我们可以使用文档元素的scrollLeft和scrollTop属性。计算出最后的坐标后，你能够最后确定用户点击鼠标的框中的位置。
  五、 显示结果
  
  　　populateResults()方法负责使用搜索结果填充结果栏。它接受两个参数：包含该结果的元素和一个XParser对象(XParser是一个基于JavaScript的RSS读取器，可从www.wdonline.com/javascript/xparser/自由下载):
  
  msnWebSearch.populateResults = function(divResultsPane，oParser){
  　var oFragment = document.createDocumentFragment();
  
  　divResultsPane.removeChild(divResultsPane.firstChild);
  
  　　这个方法以编程方式并通过DOM方法生成＜a/＞元素；这样以来，这些元素将被添加到一个在第一行创建的文档片断中。下一行删除添加在drawResultBox()中的正加载的＜div/＞元素。
  
  　　下一步是创建这个链接：
  
  for (var i = 0; i ＜ oParser.items.length; i++) {
  　var oItem = oParser.items[i];
  
  　var aResultLink = document.createElement("a");
  　aResultLink.href = oItem.link.value;
  　aResultLink.className = "ajaxWebSearchLink";
  　aResultLink.target = "_new";
  　aResultLink.appendChild(document.createTextNode(oItem.title.value));
  
  　oFragment.appendChild(aResultLink);
  }
  
  　　这段代码遍历回馈的各个项，并且由该数据生成链接并把＜a/＞元素添加到文档片断最后。
  
  　　当退出循环时，该文档片断被添加到divResultsPane以显示搜索结果:
  
  divResultsPane.appendChild(oFragment);