简单利用JQuery为搜索栏增加tag提示

其实我认为这个功能用处未必大,因为我在自己的网站搜索栏上添加这个功能已经两周了,居然还没有人发现的样子。很简单的一个功能,就是当用户在搜索栏输入搜索字符时候,利用JQuery的功能把一些预设好的关键字浮现出来,除了让用户意外一下,还有就是让用户简化输入。比如象下图的样子:

tag suuggestion 简单利用JQuery为搜索栏增加tag提示

实现的方法很简单,首先是要在你的网站上加载JQuery,然后再加载下面的JS文件,下载之:

tag.js

接着就是编辑你自己的关键字。这里的做法是你自己自行编辑,还有很多方法是直接查询WordPress的数据库的。但那样做就显得很专业的样子。对于我自己来说,本来站内的搜索功能就不是很受用,为了那没多被使用过几次的搜索而复杂这个提示功能显然不值,所以还是自己来编辑一些重要的关键字好了。下面的代码也要整合到网站的JS文件中:

<script type="text/javascript">
$(document).ready(function() {
$('#tags').tagSuggest({
tags: ["WordPress","WordPress 主题","WordPress 插件","生活","巴黎","设计","法国","照片","朋友","技巧","下载","JQuery","JQuery 教程","JQuery 例子","twitter","Google","seo","firefox","firefox 扩展","css","ajax","theme","theme 教程","theme 技巧","Js-O3","Js-Paper","blackberry","blackberry 8900"]
});
});
</script>

能看出上面的关键字编辑了吧。

然后最后一步就是需要指定相应的搜索栏,如上面代码中的"#tags"就是决定这个东西。修改搜索栏的ID,让其适应则可。也就是说为搜索栏的input内添加一个id="tags"则可。或者你也可以修改上面的代码内的ID,让其适应你原有的搜索栏内input的ID。

当然还有对关键字的样式设定,这个就随大家爱好了,我这里不列出。

分类:WordPress;标签:, ;收藏本文的永久链接

21 Responses to “简单利用JQuery为搜索栏增加tag提示”

  1. welee 回复此留言 2009/05/22 21:28 #comment-7264

    先沙发再看。

  2. welee 回复此留言 2009/05/22 21:36 #comment-7265

    我其实有发现到了,正在想着你什么时候会分享出来呢,呵呵!

  3. Richares 回复此留言 2009/05/23 03:14 #comment-7273

    不厚道,你这个功能第一次放出来的时候,我就邮件给你了,让你分享和更新出来。但你没有理会我的邮件。

  4. Jinwen 回复此留言 2009/05/22 21:45 #comment-7266

    @welee 好孩子,看来这里的沙发没人够你来了。。。

  5. 打篮球的手 回复此留言 2009/05/23 06:50 #comment-7280

    经常来,还真没发现。。。

  6. welee 回复此留言 2009/05/23 09:43 #comment-7287

    @zwwooooo 我没老坐沙发啊,只坐过几次,这里的沙发要用抢的,很多竞争对手...

  7. magickyo 回复此留言 2009/05/23 09:53 #comment-7288

    你不说还真没发现啊,哈哈

  8. zwwooooo 回复此留言 2009/05/23 04:37 #comment-7275

    这个js收来用下,很‘以人为本’

    @welee 咋老是你沙发呢?速度真够快的了

  9. 睡到自然醒blog 回复此留言 2009/05/23 09:07 #comment-7283

    这个很友好~

  10. 睡到自然醒blog 回复此留言 2009/05/23 09:08 #comment-7284

    还要编辑关键词的啊,能不能喝一些 tag 插件结合起来....

  11. Jinwen 回复此留言 2009/05/23 09:13 #comment-7285

    @睡到自然醒blog 要调用数据就会麻烦好多的了,复杂更多。

  12. kerby 回复此留言 2009/05/23 17:22 #comment-7296

    很奇怪啊,在你这里我输入wo就有提示,输入wor提示就没了

  13. robertsky 回复此留言 2009/05/23 15:50 #comment-7294

    不错的效果

  14. 永远的冰点 回复此留言 2009/05/25 07:53 #comment-7356

    非常好的效果!!!

  15. 爱月 回复此留言 2009/05/25 15:13 #comment-7368

    异常喜欢异常喜欢啊~

  16. 随影 回复此留言 2009/06/17 11:23 #comment-8113

    更具用户习惯,或则更准确点,更具我的习惯,搜索栏预设那些关键字是多余的,当然技术还是学习了哈!!

  17. sam 回复此留言 2009/07/02 14:10 #comment-8400

    非常实用,谢谢讲解分享~~~~

  18. breadnini 回复此留言 2009/11/30 08:47 #comment-11221

    非常好的教材,受用

  19. 左手烟 回复此留言 2010/01/01 21:47 #comment-11997

    :???: 确实感觉用处不大,还要加载个JS


The trackbacks and pingpacks: