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

     然后，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="http://www.ASPcool.com/lanmu/CSS/websearch.CSS" /＞
  ＜script type="text/JavaScript" src=http://www.ASPcool.com/lanmu/"js/zXML.js"＞＜/script＞
  ＜script type="text/JavaScript" src=http://www.ASPcool.com/lanmu/"js/xparser.js"＞＜/script＞
  ＜script type="text/JavaScript" src=http://www.ASPcool.com/lanmu/"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="http://www.ASPcool.com/lanmu/CSS/websearch.CSS" /＞
  ＜script type="text/JavaScript" src=http://www.ASPcool.com/lanmu/"js/zXML.js"＞＜/script＞
  ＜script type="text/JavaScript" src=http://www.ASPcool.com/lanmu/"js/xparser.js"＞＜/script＞
  ＜script type="text/JavaScript" src=http://www.ASPcool.com/lanmu/"js/websearch.js"＞＜/script＞
  ＜/head＞＜body＞
  ＜a href="http://www.ASPcool.com/lanmu/dot.ASP#" onclick='msnWebSearch.search(event，"\"Professional Ajax\"");
  return false;'＞Search for "Professional Ajax"＜/a＞
  ＜br /＞＜br /＞＜br /＞＜br /＞
  ＜a href="http://www.ASPcool.com/lanmu/dot.ASP#" onclick='msnWebSearch.search(event，"Professional Ajax");
  return false;'＞Search for Professional Ajax＜/a＞
  ＜/body＞
  ＜/HTML＞
  
  　　第一个新的链接执行一个针对准确词组"Professional Ajax"的搜索，而第二个链接将搜索这其中的各个单词。还要注意，在onclick事件中返回的是false-这强迫浏览器忽略掉href属性。点击这些链接将在光标位置绘制搜索框，并且就在此处显示你的搜索结果。