Chinaunix首页 | 论坛 | 博客
  • 博客访问: 18926016
  • 博文数量: 7460
  • 博客积分: 10434
  • 博客等级: 上将
  • 技术积分: 78178
  • 用 户 组: 普通用户
  • 注册时间: 2008-03-02 22:54
文章分类

全部博文(7460)

文章存档

2011年(1)

2009年(669)

2008年(6790)

分类:

2008-04-14 15:55:55

五、 显示结果

  populateResults()方法负责使用搜索结果填充结果栏。它接受两个参数:包含该结果的元素和一个XParser对象(XParser是一个基于Javascript的读取器,可从 cript/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);

  六、 关闭结果框

  为了关闭搜索结果框,msnWebSearch对象提供了close()方法。close()方法负责处理该链接的onclick事件(关闭该小框):

msnWebSearch.close = function () {
 var divSearchBox = this.parentNode.parentNode;
 document.body.removeChild(divSearchBox);

 return false;
};

  该搜索框其实并没有关闭;事实上,它被从该文档中删除了。为此,需要检索divSearchBox元素。第一行代码完成这一任务-通过检索这个元素的父结点的父结点实现。因为close()负责处理onclick事件,所以this引用这一链接。下一行从文档中删除divSearchBox元素。最后一行,返回false,从而强迫浏览器不要沿用一个链接的缺省行为(转到在href属性中标注的位置)。

  七、 构建搜索接口

  msnWebSearch对象的最后一个方法是search(),它提供执行一个搜索的接口。你可以使用一个元素的onclick事件来调用search()。它接受两个方法:一个事件和搜索术语:

msnWebSearch.search = function (e,sSearchTerm) {
 var divSearchBox = this.drawResultBox(e);
 var url = encodeURI("websearch.php?search=" + sSearchTerm);
 var oParser = new XParser(url);
 oParser.onload = function () {
  msnWebSearch.populateResults(divSearchBox.childNodes[1],oParser);
 };
};

  第一行调用drawResultBox()方法并且把事件e传递给它。下一行编码该URL以实现合适的转换。这个URL被传递给XParser构造器以创建一个新的分析器。当搜索回馈完成加载并使用结果填充搜索框时,该分析器的onload事件处理器调用populateResult()方法。
当然,构建这个搜索框的一个理由是,使其更适合于你自己的站点的外观。
阅读(232) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~