搜索关键字自动补全效果(类似于google)

编程技术  /  houtizong 发布于 3年前   188

jquery-autocomplete的类google自动补全效果做得非常出色,不仅完成了应有的效果,而且还提供很多可以让用户自行扩展的地方.不过它对于输入法在firefox浏览器中的使用时不太理想,原因在于基于firefox浏览器,用户的输入效果与ie的不同,javascript在此时没法监听到用户的键盘事件.
网上虽然有然关于这个问题的解决方法,比如:将源码:
<code>
$input.bind(($.browser.opera ? "keypress" : "keyup"
</code>
红色部份为修改的,但这个方法只能解决部份输入法,如搜狗拼音输入法,而对于五笔输入法存在着问题.而且使得选中提示列表中某项后的回车事件出现严重问题,即直接提交,所以关于这个修改是不可取的.
不过google在这方面是做到位了的,它没有相关问题,当时我猜想是不是google用了计时器在不断得监听值的改变,而不是像jquery-autocomplete那样监听键盘事件.后来网上一篇作者名为Realazy写的文章回答了我的问题,以粗体内容转自http://www.webjx.com/javascript/jsajax-348.html.

在某些情况下，比如自动补全（auto complete）的输入框中，需要使用keyup事件来监听键盘的输入以迅速作出回应。
关键在于keyup, 如果世界是美好的，那么就不会有这篇blog. 可是……
世界是不美好的。我们活在中文世界，我们要用输入法。在输入法开启的情况下，您会碰到不美好的事情：keyup失效。对于您绑定到keyup的任何回调函数，除非您把输入法切换回英文状态，否则它会无动于衷。如果能称之为bug，我会很高兴，因为bug会有修复的可能，如果是特征（feature），那么，我只好叹息一下。

问题:
在开启输入法的情况下，三个浏览器的具体问题如下：
IE:触发keydown和keyup, 不触发keypress. 能够获得输入值。
Firefox:触发keydown和keypress, 不触发keyup. 输入值未能获得。在回车后会触发keyup, 可获得输入值。
Opera:keydown, keypress和keyup都不触发，输入值也未能获。
（如果您能帮我试用一下Safari，我会很高兴并谢谢您。这里有一个 测试页面 ）

解决方案:
总结出以上问题，没有兴奋反而陷入绝望，因为没有google出解决方案（是的，对于拉丁语系的老外来说，不会存在输入法）。但是，wait, 谷歌搜索的自动补全不是工作得好好的吗？于是研究一下这个 http://www.google.cn/ac.js。嘿嘿，虽然混淆得还可以，但还是可以发现蛛丝马脚的。它使用一个计时器，当输入框处于聚焦（focus）状态时，每10毫秒执行一次回调函数。

虽然挺耗资源（所以建议在输入框失焦（blur）时，一定要清除这个计时器），但也只能如此了。作前端开发的，不仅要与语言（JavaScript, CSS, HTML） 斗，还要与浏览器斗，其乐无穷也。

总结:在客户端javascript上装下计时器不会影响性能,所以我认为google这种做法是可行的.因这与部分用户友好界面相比,再值得不过了.