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);

　　六、 关闭结果框

　　为了关闭搜索结果框，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] [2] [3] [4] [5]  ·上一篇：Ajax无刷新实现图片切换特效 ·下一篇：利用Ajax传递Xml文档 ·搜一下：百度搜[利用PHP＋javascript打造AJAX搜索窗]相关内容 E-MAIL:309076721@163.com 本站为非营利性质个人网站,建站只为个人爱好与学习,内容大多为电脑技术教程； 网站内容来源于互联网收集整理,禁止用于非法途径,如发现本网站上有侵权的文章请联系我们,我们会尽快删除； 本站不对站点内容准确性、完整性和真实性作任何承诺,由此产生的后果本站不承担任何责任,对以上引起的一切法律纠纷本站无权利承担。