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

     六、 关闭结果框
  
  　　为了关闭搜索结果框，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)。因此，该链接从来不会真正处于活动或被访问状态。