This box will be fixed on your screen using Firefox, Opera9 or IE7.

LiveSearch, Very Cool

搜索了一下,好像还没有中文Blog讨论Livesearch。这是一个非常酷的功能,把你的鼠标放在我的搜索框中,随便输入1个字母什么的,稍等一下,马上会弹出一个下拉菜单,里面会有搜索的相关结果。真的很酷吧?
其实Michael一个月前写出Livesearch文章的当天我就注意到了,然后也试验过,没有成功(js部分的粗心所致)。文章后面讨论也很热闹,主要是关于JS的问题,我也因为当时忽略了几个地方所以没试验成功。一直拖到这几天看到国外很多WordPress的用户都加上了这个功能,才决定也要弄一个出来玩。

关于Livesearch的源码及官方说明可以参看他们的Wiki。利用XMLHttp写的一段js,所以下拉弹出的速度不会很快。支持IE5及以上、Mozilla1.0以上及Safari1.2以上的浏览器。应该是说得比较详细了。下面来说说如何在Wordpress中实现这个功能:

  • 首先下载livesearch.php这个文件(Michael已经给出了);
  • 还有livesearch.js(最好直接去rip他的),官方wiki上的就要作一些相应的改动(参看Michael文章下面的回复);
  • 屏蔽掉wp-blog-header.php中527~530行这一段,或者直接下载Michael提供的一个复本
  • 记住Wiki上说的<head>部要加载这段js;
  • 还有<body>标签要加上onload="liveSearchInit()"的属性;
  • 搜索输入框部分的代码至少要加上Wiki上说的那些,当然你也可以参考Michael文章下面的回复
  • 最后为新增的这些元素定义一些CSS样式就行了。

好了,全部搞掂了。把修改的文件上传到你的WEB服务器上。自己刷新首页看看吧。搜索时注意要一个字一个字的输入,等“闪”一下后再输入第二个字符。好像对某一些中文字符支持不是太好,但有些中文也能弹出搜索结果。不管如何,这个功能是非常酷的。

补充笔记:(20041113补充)
由于IE对CSS的糟糕支持,你如果使用IE无法看到“弹出下拉搜索结果”中鼠标悬停背景效果;本来“弹出下拉”采用绝对定位,但IE不能识别其父对象,而认贼作父把“整个页面”看为老爹,所以“弹出下拉”会靠“页面”右边,这样看起来会非常离谱(下拉距离搜索框N远),无奈,为照顾这部分IE守望者,改用关联定位,无论IE、Ffox,“弹出下拉”都会在“搜索框”的下部弹出,但关联定位对象不能重叠,会把下面的“日历”冲到下面,结果LiveSearch后,“日历”才弹回原位,这不能不说是一个很大的遗憾。

7 Comments

  1. deadline Comments @ 21:37:38 on 2004-11-02

    真的很酷哦…

  2. Dark Comments @ 00:29:05 on 2004-11-03

    晕死,Pingback了三条到Michael的Livesearch那篇文章去.因为他是iso西码,全部显示为乱码.

  3. Rokey Comments @ 23:24:07 on 2004-11-03

    恩,虽然我不懂,但实现效果(结果) 不错 新思路。。。

  4. Dark Comments @ 23:58:03 on 2004-11-03

    Rokey大驾光临啦….估计是网络问题你多按了一下回复,我删除了一条重复的.Sorry.我的Blog没什么内容…我太懒了….

  5. xpoint Comments @ 14:22:00 on 2004-11-09

    似乎不能正常显示哦,报错

  6. Dark Comments @ 16:02:02 on 2004-11-09

    我检查了一下,我的没问题呀

  7. 对他说 » Wordpress Theme - fSpring Pingbacks @ 00:43:53 on 2006-04-06

    […] 回到fSpring这个主题上,还算符合我的喜好,准备动手修改修改,换换图改改颜色啥的,再试着把Ajax comments和liveSearch这两个插件弄上来,估计很难。 补记:弄好了Ajax comments,其实就是用的Xs的Simple 1.2模版代码罢了“ Orz。那个liveSearch慢慢弄~ […]