前面三篇阅读数以每次1/2的速率递减。不知道是少了喜闻乐见的段子还是少了程序员喜欢的干货。
相关阅读：
今天说点技术相关的。
现在不管是网站还是app,点击搜索框，开始输入关键字，每输入一个字，下方都会自动出现相关联的一些提示。这个功能现在已经成为标配（特意限制的除外）。比如这样
还有签约作者，加油写！
“把简单留给用户，把复杂留给自己”
这个看似简单的功能背后有着并不简单的实现。就像搜索引擎主页不过就是一搜索框，但背后的数据呈现才是难点。
当然我们一众小站，自然不用那么复杂。本人的小站（见个人介绍）也希望能实现这个功能，网上现成的插件大概有Jquery的autocomplete，twitter的typeahead，bootstrap的typeahead.因为jquery的autocomplete很久不更新，不幸的是小站用了最新jquery2.X，不太想换。twitter的资料少。正好小站使用了bootstrap框架，于是顺理成章的用选择了后者。
bootstrap的typeahead只支持bootstrap2.X版本！bootstrap资料多，反正小站的要求2.X也能实现，就换你了。嗯。运行起来的结果还是不错的：
图片截图自父母心网
直到有一天，本汪，哦不对，本猿觉得网站要上线了，该完整的测试一下各浏览器的兼容性（关于各浏览器兼容性的坑以后有机会再写）。
windows下各浏览器测试OK！
MAC下各浏览器测试OK！
微信、微博、QQ内置浏览器测试OK！
android手机下测试OK！
iphone下第三方浏览器正常，偏偏自带的safari有！问！题！，PC和mac下的版本正常。坑爹
具体表现为：补全英文字符正常，就是不会正常补全中文。输入关键字并不能触发查询（服务器侧抓包验证），需要删除一位后才会立即触发查询，然后能正常实现补全。比如数据源为“最爱我的祖国”，最小长度设置为2位。正常情况下输入“最爱”应该就能自动补全，实际情况下，输入“最爱”后并不触发查询（query)，输入“最爱我的祖”也不会触发，但此时若删除最后一位“祖”字，能立即触发查询（删除哪一位不关键，只要有删除的动作就行，比如删除第一位的“最”字也可以）
查代码看上去都正常。f12调试也看不出问题。最后抓包分析，确实没触发查询，但为什么就是查不出来。抓狂。
内事不决问百度，结果惨不忍睹，坑爹的一堆互相抄袭的博客，完全无解。
百度知道提问吧：等了三天没人回答。
知乎提问：还是没人答。
不知道是不是有更好的解决方案，大家都不用这个了？
算了，我没找到更合适的方法，硬着头皮继续查。
直到有天尝试了bing的英文搜索，在github上找到Bootstrap-3-Typeahead！完美解决各浏览器兼容。妹的，坑了我那么多天。
古人云：福兮祸所依。兼容性问题解决了，但新问题来了，我的网站变成了这个样子：
提示部份不支持html
仔细看了一下插件源代码，终于找到了引起这个问题的函数，尝试改写，总是不满意（其实我跟大神只差一个字而已，别人是大神，我是大龄，为啥区别就这么大呢）。
直到半夜12点，实在无招，无意中看到github上有作者的联系方式，看照片就像大神，
哈哈，于是尝试着发了一封邮件，没想到第二天起床就收到了回复：
上网查了一下，nl的后缀居然是荷兰的。
哈哈，第一次感受到邮箱无国界，英语无国界（虽然我写的邮件相当Chinglish，另外，标题的with是不是应该用about?)
可惜的是，大神给的回复不是特别适合我的需求，几经摸索，尝试使用typeahead2.0的函数代码局部替换，完美解决。
小结：
1、问题是由于highlighter函数引起
2、简单的解决方案,js文件中重写此函数：
highlighter: function (item) {
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\>amp;')
return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '' + match + ''
})
},
网友评论