我是非常反对把 javascript 写在 html 标签里的，这和 style 写在 html 标签里一样，虽然不违反 W3C 标准，但也不推荐这么写。因为：

1、完全没有复用性可言，如果是个表单，输入框很多，每个都需要这样的效果，那就每个都这么处理吗？

2、如果要修改其中的提示文字，费时费力又不好维护。

3、我们倡导结构（html）、表现（css）、行为（javascript）三者分离，这才是一个好的页面。

那要怎么写才能实现这个效果，而且既有复用性，又好维护，又不需要把 js 写进 html 里呢？

相信我们都有加载 jQuery，我就基于 jQuery 写了一个方法，先看 DEMO，具体方法如下：

1、html 部分：

2、引入 jQuery：

3、执行脚本：

实现的最终效果是一样一样的，或许是我个人的代码洁癖，但我相信，好代码从细节开始！

也确实，很久没有更新过了，不过今天写的这篇文章希望足够能帮我“除草”。文章名字很长，万戈牌 WordPress 搜索自动匹配提示标签关键词。到底是个啥呢？客官们可以先试用一下本站右上角的搜索框，输入一些关键词，没等你输入完应该就可以看到有一些相关的 keywords 显示出来了，相信大家对这个应该不陌生吧，Google、百度等所有搜索引擎都是这么做的，智能匹配搜索提示！

想知道怎么实现的吗？先等我把废话说完，否则我绝对不会告诉你插件的下载地址就在文章末尾！

大家知道，在 WordPress 我不是很提倡使用插件，主要是考虑到速度和性能等方面，不过这次我还是把这个 WordPress 搜索关键词提示的功能做成了插件的形式。主要是因为，要把这个方法用非插件的方式公开出来，恐怕又有一大半的人要来问我 jQuery 放在哪里？functions.php 没有咋办？所以考虑到这个功能的易用性和大众化，还是做成插件更好。

这个插件的特点在哪里？

1、做插件的时候着重考虑了性能问题，当用户鼠标聚焦到搜索输入框的时候，才会异步去加载一些需要的脚本和请求（这就是传说中的按需加载），所以在不使用站内搜索的情况下，该插件不会带来速度和性能的影响，可以放心使用。

2、支持匹配中文关键词（这是必须的啊！）

3、支持方向键上、下以及回车的键盘快速选择。

如何使用这个插件？

1、上传后在 WordPress 后台启用这个插件即可。没有任何配置选项，不需要修改 WordPress 主题，全自动帮您搞定一切。插件嘛，不就是为了图个方便

2、这个真没有了……

我的主题启用这个插件无效，这是什么情况？

1、检查一下您的原主题有没有 JS 错误，如果主题本身就报错，很有可能阻断万戈牌 WordPress 搜索自动匹配提示标签关键词插件（这插件名字是不是起的太长了。。。）的 JS 执行。

2、检查您的主题 header.php 中有没有 wp_head() 这个方法，本插件载入的脚本依赖于这个方法，如果没有请加上。

3、检查您的 RP 值，不解释 ^_^

和其他插件或者功能冲突怎么办？

暂时我还没有碰到这种情况，如果被您有幸碰到了，您可以自己修改插件以适合您的主题，如果还是有不良反应请参照以下声明第2点，谢谢。

提示的颜色太丑了，我要怎么换？

可以在插件目录下的 wg-tags-tip/style.css 文件里进行修改，也可以在您自己的主题的样式文件里覆盖重写样式。

声明：

1、仅在本地的几个主题上测试通过，不能模拟所有主题的情况，如有 Bug，欢迎反馈给我，我会及时修正，谢谢。

2、该插件免费，属于非卖品，所以无售后服务，如需个性化地调整，概不接受，也不要拿付费诱惑我，我会酌情考虑的！

让您久等了，最后献上万戈牌 WordPress 搜索自动匹配提示标签关键词插件的下载地址：wg-tags-tip

第一，原生的 JavaScript，不依赖于任何 JS 库。

在平时的开发过程中，我们已经太过于依赖 jQuery、YUI 之类的 JS 框架，框架当然是好东西，但是正因为如此，我们就丧失了很多接触到 JavaScript 深层次的机会，也使得实现一些小功能就要杀鸡用牛刀地把整个框架引进来。就像吃薯条我喜欢原味的一样，原生的 JavaScript 也有其诱人之处。

第二，全自动化地焦点图。

什么是全自动化的焦点图？想象一下你所需要的全自动化应该是什么样的，告诉我尺寸大小、轮播间隔时间、图片的以及链接的基本信息，还有放在哪个位置，然后我就给你生成一个焦点图。这太完美了，而不需要再调整样式啊什么乱七八糟的，对使用者来说，越简单越好，不是吗？

基于以上两个出发点，这个原生 JavaScript 版的自动化焦点图功能就诞生了。请看 DEMO。

呃……这 DEMO 里的图片还在用我两年前的轮播图的图片，有点寒酸，对不起观众啊，不过图片不是重点，请看代码。代码部分我就不在文章里贴出来了，有兴趣的朋友可以查看 DEMO 的源代码，我没有压缩过，注释也都还在，相信应该是比较明了的。

调用这个方法也是相当简单，方法接受6个参数：
width: 560,    // 焦点图宽度（非必须，默认值自适应）
height: 250,   // 焦点图高度（非必须，默认值自适应）
auto: false,   // 是否自动切换（非必须，默认值 false）
interval: 3000,   // 切换间隔时间（非必须，默认值 3000，当 auto 为 true 时有效）
targetId: 'slide',  // html 对应的焦点图 ID（必须）
data: [ ]   // 焦点图数据（必须）

然后建一个和 targetId 值相同的空标签 ID 就可以了，你不用担心你的焦点图结构怎么写，因为在 JS 里会帮你完成这些，你也不用担心焦点图的样式怎么调整，因为在 JS 里也会为你解决这些困扰。

那么这个可以为你完成一切的全自动，而且又是原生的 Javascript 焦点图，会不会特别庞大呢？我对这个 JS 压缩后，只有 4Kb，是不是也非常的小清新呢？想象一下，如果你用 jQuery 来实现一个同样功能的焦点图功能，咱们且不说焦点图所需耗费的 JS 大小，单说一个压缩过的 jQuery 1.7 就要 90K+，差距啊有木有！

在过年的时候，Wis 去了瑞士旅游，还特地给我买了一盒瑞士巧克力，于是这盒巧克力开始了三个国家之间的来回旅行，纠结了一个月，我终于在今天收到了这份别致可口的礼物。

巧克力第一站：瑞士。

非常感谢 Wis，就算在瑞士旅游，也不忘了我这个远在中国大陆的朋友。因为 Wis 在新加坡，我只是在 Wis 来中国的时候和他见过区区几次。对 Wis 本人、他的项目、经历、各种，我只能用两个字来形容，靠谱！所以和 Wis 是相见恨晚，但也没想到他会给我从瑞士带来意外的 Surprise。

巧克力第二站：新加坡。

等过完年，Wis 就带着这盒精致地如艺术品般的巧克力带回了新加坡，于是巧克力经历了它的第一次跨洋的飞行。

巧克力第三站：上海。

熟悉我的朋友或许知道，我的家在上海，Wis 要给我送巧克力，但是终点站绝对不是就到此结束了的，曲折的还在后面。更熟悉我的朋友会知道，我是在杭州工作，只有周末会回上海。那天 Wis 恰巧来国内办事，但是恰巧那天我又有事没能在上海，与 Wis 错过了一面，巧克力也就和我擦肩而过了 T_T。

巧克力第四站：新加坡。

是的，这盒巧克力又跟着 Wis 飞洋过海，回到了新加坡。但是 Wis 仍然不放弃给我送巧克力，找了国际快递，让巧克力再一次飞来上海，送到我家。

巧克力第五站：上海。

终于，这次是终点站了，但是这次旅程特别曲折漫长。巧克力在国际快递的运送下，本月6日已经抵达国内，由 EMS 在国内转运，但是我却迟迟没有收到快递通知，就在我和 Wis 都以为巧克力已经被丢包的失望情绪下。我根据 Wis 提供的国际运单号，一路跟踪查询 EMS，就算丢包也要有个说法！

今天，也就是距巧克力已经抵达国内的第13天后，我终于在信箱里收到了一封挂号信，让我去邮局取包裹，几经周折，终于迎来了这飞来飞去的巧克力，内牛满面啊有木有！

下面和大家分享一下这别致的巧克力~~~~~~~~~~的照片 o(∩_∩)o

感谢 Wis，感谢围观的群众

不过，因为做这个主题的时间比较仓促，又想赶在新年前上线，很多功能还没有完成，真是对不起尘埃老哥的设计呀。大家可以看到，我整个侧边栏还没有做，为了不显得太空空荡荡，就填了一个广告（原来广告还能这么用，嘿嘿）；另外评论模块也没做，暂时用第三方的“评论啦”来代替，感觉也不错，但是昨天导入 WordPress 9W 多条评论的时候让我非常内桑，直到发文前，还在导入 ing....还有很多细枝末节的小功能，可以提升用户体验的就更没有时间做了，各种速度上的优化也只做了一半。所以这个主题。。。呃。。。正处于 beta 的 beta 阶段，拍砖请悠着点，谢谢。

当然，虽然说是各种cuo，但毕竟是万戈牌主题，cuo 也要 cuo 的很有范儿！主题延用之前 HTML5 这是自不必说了，另外还加上了很潮的微数据，让 SEO 尽显奢华，哈哈；在首页的最新文章功能还大胆使用了 AJAX 来异步获取文章，对用户体验应该不错；搜索还提供了关键词自动提示功能；还有很多隐蔽的亮点，大家有兴趣的慢慢找吧。

欢迎各位对这个新主题提出宝贵意见，也欢迎大家来找碴，挑 bug。下午就要赶火车去了，主题的完善工作要等到年后来做了，因为我说了，今年过节不上网。好好过个年，别再为代码纠结了，哦耶~

最后，预祝大家新年快乐，回家路上顺顺利利 \(^o^)/

不知道其他地区的朋友是怎么过年的，就我自己的感触来说，年味是一年不如一年。小时候过年，一大桌亲戚朋友围坐在一起，人太多的时候还要另外开一桌，吃完年夜饭就和小朋友们冲出门去放烟花爆竹，这爆竹声会在那一整夜此起彼浮，第二天推开门就可以看到一地的爆竹残骸，还有一阵扑鼻的硝烟味儿，那个味儿就是我印象深处的年味。

但是现在，我可以想象我们“进化”了的过年方式。我们会拿着手机互相转发着从别人那里转发过来的祝福短信；我们会在微博上 @ N多的好友互相拜年；我们会在QQ群里和陌生人说一句新年快乐；然后眼睛一闭一睁，这一个新年就算过完了。

并不是说哪种过年方式的好与不好。我想应该有很多宅男腐女和我一样，整天面对着电脑，生活就是网络，工作也是网络，家里是大大小小的屏幕，公司里也是大大小小的屏幕，甚至在路上还是各种大大小小的屏幕，我们人与人的交流越来越少，这年味也就越来越淡。你是习惯了这样的生活？还是被这样的生活所束缚着？

今年过年我会回老家，那是一个没有网络，只有纯年味的地方。那时，我可以好好享受一下没有网络的清静日子，不用关心今天谁@了我，也不用关心还有多少工作没有完成。如果可以，我真心希望发起一个#今年过节不上网#的活动，让大家放下心中的束缚，过一个纯静的新年。

今年过节不上网，只能在这里提前给大家拜年，祝所有博友们在新的一年里PR上9，IP过万，广告被点爆！

要把整整一年的话题浓缩在一篇文章里，真是千言万语，简单点就从以下几个方面谈谈。

技术：

从捣鼓博客起家的一个业余代码爱好者，转变为一个专业的程序猿。在这一年技术上的成长，无疑是一个质的飞跃。之前就有很多人对我转行的行为表示质疑，包括我的父母，一个学文科的想写代码？疯了吧？也有人说，当我把这一门兴趣转变为工作后，只会磨灭我的兴趣。不过就现在看来，当初对我有质疑的朋友们，感谢你们的激励，让我有动力不断证明我选择了一条正确的道路，我比从前更喜欢这个行业，难以自拔了。

越深入了解前端这个行业，就越发现自己技术实力的薄弱，恨不得能把一天掰成两半两花，我需要更快地成长起来，我需要更多质的飞跃，我需要突破自己的瓶颈。

博客：

说到博客，我就心中有愧。这个博客曾是我引以为傲的平台，是博客，让我认识到了这么多海内外、线上线下的朋友；是博客，引领我进入挨踢这个专业领域，让我堂堂正正写起代码；也是博客，让我有一个倾诉、发泄、交流的地方。但是这一年，特别是后半年，我把更多的时间投入了工作、生活、感情中，博客的使命不至于此，博客，我还会回来的！

根据前两年的惯例，我还是贴一些今年博客的一些数据：

PR = 4，Alexa = 4W+，和去年比，PR 值是没变，Alexa 值下跌了 1 万，这个在我意料之外，今年都没怎么更新博客，Alexa 居然只跌了 1 万，还要感谢广大博客们长期以来对小站的支持，这更让我这个博主感到惭愧。

这是我刚刚在 WordPress 后台控制台（现在应该叫“仪表盘”了，有点不习惯）截的图，比去年这个时候多了 128 篇文章，2W+ 条评论，我就不评价这个数字多还是少了，用心写了每一篇文章，也感谢每一条评论的博友们。

生活：

去年闲的蛋疼，去报了一个研究生，当时也没料到今年这一年会忙到这么火爆。所以这研究生有点荒废了，很可惜，但是权衡工作和兴趣，研究生权当是生活的调味品，毕竟也认识了一群年长我很多的哥哥姐姐辈，甚至是叔叔阿姨辈的朋友们。曾经拥有，这一点，我知足了。

另外，还有本年度最大的收获，亲耐滴依灵作为我的女朋友，出现在我忙碌却又平淡的代码生活中。感谢她一直以来对我的支持，无论是我的工作还是生活，即使我加班到凌晨，她都会守在电话的那一头等我；在我生日的那一天，她还特地请假，风尘仆仆赶到我所在的城市给我庆生。这一点，我也知足了。

目标：

每年这个时候，我都会回顾一下这一年的成长、失败、经验……各方面的，就像在写下这篇文章之前，我又重温了一下前年、去年这个时候的总结，有苦也有甜，冷暖自知。这不是工作报告，不用在意老板怎么看；这不是作文，没有字数体裁限制；这不是思想总结，不用违心地宣扬自己的情操有多高尚。这只是一个总结，当我明年再来回顾这篇总结的时候，我希望我能会心地笑着对自己说，你又成长了。我的目标就是这么简单。

2011年，走好，我一定会想你的。

因为我也不是刻意去写这个 jQuery 的无缝滚动，所以 JS 也没封装过，只提供了几个基本的参数作修改，只能仅作参考。

HTML 部分：

jQuery 部分：

基本原理和使用方法都写在注释里了，我也就不多作解释了。最后说一句，google、百度上搜一下就知道，已经有大把大把写好的横的竖的无缝的滚动，总有一款适合你，但是我觉得，只有自己亲自写的才最适合自己的需要，所以就有了以上代码。

智通手机客户端有什么用？

或许你刚踏出学校的大门，正在为寻找一份合适的工作发愁；或许你对现在的工作状态厌倦了，想换一个工作环境；或许你正需要一个更高更好的提升空间；或许现在的工作无法让你尽情地发挥能力所长……智通手机客户端（http://app.job5156.com/）一定会对你有所帮助。

智通手机客户端集成了网站最新职位信息，并提供最贴心的求职服务与指导，为您实现随时随地找工作的便利，个性定制职位的精确推送，最新最及时的招聘会信息，还有最专业全面的求职指导。轻松求职，尽在掌握！

经朋友推荐，我在自己的手机上安装了 android 版本的智通人才的手机应用试用了一下，感觉智通人才手机应用的功能非常全面，操作也很简单快捷，界面简洁友好，而且可以关联或者注册在智通人才招聘网的帐号，方便随时随地管理你的简历以及查看最新职位信息。

智通人才手机应用主要包括以下功能：

1、职位、公司搜索

这是智通人才手机应用的核心功能，界面简洁，但是功能俱全。我们可以通过职位、公司、地点、信息发布时间等组合条件查找匹配的招聘信息。最近的组合搜索条件会被保存在下面的历史记录中，就像一个快捷方式，以方便用户再次迅速定位到有意向的搜索条件。

2、校园招聘

校园招聘是智通人才手机应用的一大特色功能。主要针对寻求实习机会的在校学生，或者刚踏出校门的应届毕业生。这一贴心的功能切实解决，或者说缓解了应届生求职难的呼声。以同样的搜索条件，我们可以在“校园招聘”栏里找到更多接受在校学生、应届毕业生的招聘信息，相信对于渴望一份合适工作的学生朋友们这绝对是个福音。

3、招聘会信息

也有一些用户暂时没有求职意向，又或者只是处于观望态度的朋友们，或许会对资讯信息这个版块更感兴趣。在这里，你可以根据指定的场馆搜索条件订阅到所观注的职场信息以及动态，让你随时随地把握住市场的最新情况。

4、简历管理

智通手机客户端不仅仅可以搜索职位信息，还可以关联你在智通招聘网上的账户，这样就可以随时了解你的简历状态，比如说有谁看过你的简历？有谁正邀请你面试？你申请过的职位等等，以便及时在第一时间作出响应。

智通人才手机应用的优势：

1、快速、便捷

智通人才手机应用同时支持 Android、iPhone 以及 wap 三个版本，换句话说，只要你的手机能够上网，就可以轻松便捷地使用智通手机客户端。

2、全面、精确

每次筛选职位后，用户进入搜索结果页还可以通过右侧的小箭头找到二次搜索框，在这里我们可以在海量的搜索结果中通过学历、经验、姓别等筛选条件进一步精确定位到自己中意的职位或者公司，这是一个相当人性化的设置。

3、个性、贴心

关联智通的账户后，智通人才手机应用会向你个性化地推送你所关注的职位信息，还有最贴心的求职指导，最新全面的求职动态。另外还有个性化的皮肤设置，缓存管理等等。

4、友好、易用

智通手机的界面交互设计都非常友好，操作也相当顺手，无论是在查询速度、账户管理、应聘分享上都有很好的用户体验。

5、免费、小巧

下载和使用智通人才手机客户端是完全免费的，只需承担流量的费用即可，如果手机支持 wifi 上网，那连流量费用也可以免去了，同时大大提升了展示的速度。而且智通人才手机客户端的 android 仅为 863K，非常小巧，安装和运行的速度非常快，用户体验极佳。

现如今手机已经成为了大家必不可少的生活必需品，智能人才手机应用给正在求职的朋友提供了一个贴身的平台，同时也开辟了招聘/应聘的新渠道、新模式。只要把生活中点点滴滴的，比如说等公车、排队、睡前等零碎的时间抽出来翻阅一下智能手机应用，或许就会有意想不到的发现。有了智通人才手机应用客户端，就好比多了一个贴身“猎头”为你出谋划策，寻找契机。所以，总的来说，智通人才手机应用是求职道路上如虎添翼的一款工具，极大地提高了我们求职的效率，只要在手机上轻松几步操作，就可以随时随地找到想要工作，又可以在海量信息中找到你想要的资讯。要想 hold 住工作，先从智通客户端开始。

就本站现在用的这个主题来说，已经用上了这个 WordPress 的语音搜索功能，有图为证。

可以看到右上角的站内搜索框比以往多了一个小话筒的图标，点击之后就会弹出一个小的提示框，此时可以清晰地说出你需要搜索的关键词，截图中是我语音说的 "wordpress" 这个关键词，有兴趣的朋友可以拿本站做测试。

但是，这个功能暂时只能在 Chrome 11 版本以上的谷歌浏览器上看到这个效果。因为这是在 input 输入框里添加 x-webkit-speech 属性来实现的，从这个属性的命名可以看出，webkit，这是一个 webkit 核心浏览器的私有属性，所以你可以切换到 Chrome 浏览器来测试本功能。

x-webkit-speech 是 html5 的 speech 功能的 API，Google 的 Chrome 在对 HTML5、CSS3 的新技术标准的支持上特别积极，所以很有幸，我们可以在 Chrome 上体现各种新奇的功能特性。实现的方法也特别简单，在你的搜索输入框的 input 标签里添加 x-webkit-speech 属性即可，如下：

废话很多，但是代码却很简单，赶紧试试呗~