在前面的代码的最后一条规则中访问过的"假"类被设置。这是为了给用户提供用户接口暗示-它们已经被使用过。通过把访问过的"假"类设置为显示一种紫色，用户就可以知道它们已经访问过那个链接，从而节省他们的时间-不必再访问一个他们可能不想看的页面。
现在，让我们来看一下如何实现搜索框。
九、 实现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属性。点击这些链接将在光标位置绘制搜索框，并且就在此处显示你的搜索结果。