Google的即时功能是一种新的搜索增强功能,随着您的键入显示结果,它已经获得了众多瞩目,而且很容易明白这是为什么,这类即时功能的主要好处在于易于实现,尤其当您在使用jQuery等客户端工具时。在本文中,您要遵循构建简单搜索引擎的流程,而后再为该引擎构建即时搜索用户界面。这一切都始于获取搜索数据。
Google的即时功能是一种新的搜索增强功能,随着您的键入显示结果,它已经获得了众多瞩目,而且很容易明白这是为什么。获取结果所需做的全部工作就是键入。您无需按Enter键来查看结果,然后调整您的搜索并再次按Enter键。这都将随着您的键入而发生。如果您还没有这样做,请尝试一下。令人惊讶的是这么小的变化却能在可用性上产生如此大的差异。
这类即时功能的主要好处在于易于实现,尤其当您在使用jQuery等客户端工具时。在本文中,您要遵循构建简单搜索引擎的流程,而后再为该引擎构建即时搜索用户界面。这一切都始于获取搜索数据。
设置数据
对于本文,我决定搜索“辛普森一家”剧集。我创建一个包含所有 “辛普森一家” 剧集、标题、季数、集数、播放日期和每集摘要的 XML 文件(包括在源代码 下载 中)。您可以在清单 1中看到该XML的一部分。
- 清单1. XML数据源
- <?xml version="1.0" encoding="UTF-8"?>
- <episodes>
- <episode title='Simpsons Roasting on an Open Fire' episode='1' season='1'
- aired='17 December 1989'>
- Christmas seems doomed for the Simpson family when Homer receives no
- Christmas Bonus. Homer becomes a mall Santa Claus, hoping to make money and
- bring Marge, Bart, Lisa, and baby Maggie, a happy holiday.
- </episode>
- ...
- </episodes>
它实际上是一个非常大的文件,其大小约为840K。这应该不令人意外,因为 “辛普森一家” 已经播放了漫长的22年。接下来就是编写一个PHP类,可为您执行XML解析和搜索。这个类称为Simpsons,如清单 2中所示。
- 清单 2. Simpsons 搜索类
- <?php
- class Simpsons {
- private $episodes = array();
- public function __construct() {
- $xmlDoc = new DOMDocument();
- $xmlDoc->load("simpsons.xml");
- foreach ($xmlDoc->documentElement->childNodes as $episode)
- {
- if ( $episode->nodeType == 1 ) {
- $this->episodes []= array(
- 'episode' => $episode->getAttribute( 'episode' ),
- 'season' => $episode->getAttribute( 'season' ),
- 'title' => $episode->getAttribute( 'title' ),
- 'aired' => $episode->getAttribute( 'aired' ),
- 'summary' => $episode->nodeValue );
- }
- }
- }
- public function find( $q ) {
- $found = array();
- $re = "/".$q."/i";
- foreach( $this->episodes as $episode ) {
- if ( preg_match( $re, $episode['summary'] ) ||
- preg_match( $re, $episode['title'] ) ) {
- $found []= $episode;
- }
- }
- return $found;
- }
- }
- ?>
该类的构造函数使用对于PHP来说标准的XML DOM库读取剧集信息的XML文件。它迭代根节点的所有子节点并提取它们的季数、标题、播放日期和剧集属性,以及包含摘要的节点的文本。然后将所有数据作为一个哈希表附加到剧集数组,该数组是一个成员变量。
然后,find函数搜索剧集列表以便使用与标题和摘要匹配的简单正则表达式来查找匹配项。任何匹配的剧集都被附加到一个数组,然后返回给调用方。如果数组为空,则没有发现匹配项。
现在有了数据,下一步就是开始构建Ajax响应程序,您的即时UI将调用该响应程序来检索数据。