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);
六、 关闭结果框
为了关闭搜索结果框,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()方法。
当然,构建这个搜索框的一个理由是,使其更适合于你自己的站点的外观。
八、 定制Web搜索框
借助于CSS,你可以容易地为你的现有站点定制搜索框,并且使你以后的任何重新设计都变得非常容易。
首先要讨论的CSS类是ajaxWebSearchBox(该类实现搜索框)。因为搜索框要确定位置,所以它必须要有一个绝对位置:
.ajaxWebSearchBox
{
position: absolute;
background-color: #0d1e4a;
width: 500px;
padding: 1px;
}
在此,绝对位置是唯一的要求。所有的其它属性都是根据你的口味可选的。在这个示例中,该框有一个微蓝色的背景,一个500像素的宽度,以及在四边上各有1个像素的填充。这个填充导致围绕该框的内容的是1个像素宽的边界。
下一个类是ajaxWebSearchHeading,它包含该框的头部文本和关闭链接。为了把关闭链接放在右上角,它使用绝对位置。因为这个原因,它要求ajaxWebSearchHeading使用一个相对位置:
.ajaxWebSearchHeading
{
position: relative;
background-color: #1162cc;
font: bold 14px tahoma;
height: 21px;
color: white;
padding: 3px 0px 0px 2px;
}
在此,唯一要求的属性也是position属性。其它的属性有助于给出该元素一个好看的外观。其背景颜色是浅蓝色,而文本部分是白色,14像素高且是Tahoma字体。该元素的高度是21个像素并且在顶部和左边都填充以边界。
如前面所述,该关闭链接的位置是绝对的:
a.ajaxWebSearchCloseLink
{
position: absolute;
right: 5px;
top: 3px;
text-decoration: none;
color: white;
}
a:hover.ajaxWebSearchCloseLink
{
color: red;
}
该元素被放置在距右边5个像素,距顶部3个像素的位置(该元素被放在右上角)。这个链接没有任何文本修饰并且颜色呈白色。当用户的鼠标停在该链接上时,文本颜色变红。
注意,这里没有使用访问过的或活动的"假"类。这是因为该窗口总是忽略这个链接的href属性(它已经在它的事件处理器中返回了false)。因此,该链接从来不会真正处于活动或被访问状态。
然后,ajaxWebSearchResults类使结果栏的风格如下:
.ajaxWebSearchResults
{
background-color: #d3e5fa;
padding: 5px;
}
这个元素不要求使用CSS属性。现有属性仅用于定义结果栏并且使它比较容易读取。背景颜色是一个浅蓝色并且围绕边缘有5个像素的填充。当然,你能够定制加载消息的风格:
.ajaxWebSearchResults div
{
text-align: center;
font: bold 14px tahoma;
color:#0a246a;
}
这个元素没有一个类名,但是你仍然能够通过使用前面的示例中展示的parent child标志控制它的风格。这个示例把文本放置在<div/>元素的中央,并且给它一个加粗蓝色的字体,且有14个像素高。
最后一个你需要风格化的元素是结果链接。这些链接有一个类名叫ajaxWebSearchLink:
a.ajaxWebSearchLink
{
font: 12px tahoma;
padding: 2px;
display: block;
color: #0a246a;
}
a:hover.ajaxWebSearchLink
{
color: white;
background-color: #316ac5;
}
a:visited.ajaxWebSearchLink
{
color: purple;
}
唯一要求的属性是display属性(被设置为block)。这使每一个链接都能够在它自己的行上显示。填充空白部分大约有两个像素宽,使各个链接之间分开一些,从而使它们更易于读取。字体名为Tahoma并且有12像素高。它们的颜色是暗蓝色,与ajaxWebSearchResults的浅蓝色背景形成对照。
当用户在这些链接上移动鼠标时,背景颜色被设置为蓝色,而文本颜色改变为白色。
在前面的代码的最后一条规则中访问过的"假"类被设置。这是为了给用户提供用户接口暗示-它们已经被使用过。通过把访问过的"假"类设置为显示一种紫色,用户就可以知道它们已经访问过那个链接,从而节省他们的时间-不必再访问一个他们可能不想看的页面。
现在,让我们来看一下如何实现搜索框。
九、 实现Web搜索搜索框
实现这个搜索框是很简单的。首先,你必须把websearch.php文件上传到你的web服务器(当然,必须安装PHP)。然后,你需要一个HTML文档来引用所有的组件。msnWebSearch对象依赖于XParser类,这个类又依赖于zXml库(可从www.nczonline.net/downloads/下载)。你必须引用下面这些文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax WebSearch</title>
<link rel="stylesheet" type="text/css" href="css/websearch.css" />
<script type="text/javascript" src="js/zxml.js"></script>
<script type="text/javascript" src="js/xparser.js"></script>
<script type="text/javascript" src="js/websearch.js"></script>
</head><body>
</body>
</html>
为了执行搜索,应该把msnWebSearch.search()方法设置为该元素的onclick处理器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax WebSearch</title>
<link rel="stylesheet" type="text/css" href="css/websearch.css" />
<script type="text/javascript" src="js/zxml.js"></script>
<script type="text/javascript" src="js/xparser.js"></script>
<script type="text/javascript" src="js/websearch.js"></script>
</head><body>
<a href="#" onclick='msnWebSearch.search(event,"\"Professional Ajax\"");
return false;'>Search for "Professional Ajax"</a>
<br /><br /><br /><br />
<a href="#" onclick='msnWebSearch.search(event,"Professional Ajax");
return false;'>Search for Professional Ajax</a>
</body>
</html>
第一个新的链接执行一个针对准确词组"Professional Ajax"的搜索,而第二个链接将搜索这其中的各个单词。还要注意,在onclick事件中返回的是false-这强迫浏览器忽略掉href属性。点击这些链接将在光标位置绘制搜索框,并且就在此处显示你的搜索结果。