`
radio123
  • 浏览: 204728 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

[转] jquery-autocomplete搜索关键字自动补全效果(类似于google)

    博客分类:
  • js
阅读更多

摘自:http://hi.baidu.com/jjflash/blog/item/31e36064a079bff6f7365428.html

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这种做法是可行的.因这与部分用户友好界面相比,再值得不过了.

分享到:
评论

相关推荐

    jquery -autocomplete(jquery 自动补全)

    `jQuery UI` 的 `Autocomplete` 插件是一款强大的自动补全功能组件,它为用户在输入框中输入文本时提供实时的建议列表,极大地提高了用户界面的交互性和效率。这个插件是基于流行的 JavaScript 库 `jQuery` 和其扩展...

    jquery的autocomplete(自动补全)插件

    **jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案,它极大地提升了用户体验,尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的,因此,首先需要确保在项目中引入了...

    jquery-autocomplete

    `jQuery-autocomplete` 是一个基于 jQuery 的开源插件,用于实现自动补全功能。这个插件使得在网页表单输入框中快速、高效地提供下拉建议变得简单易行,提高了用户界面的交互性和用户体验。它广泛应用于搜索引擎、...

    jQuery-autoComplete-1.8.22代码例子

    jQuery-autoComplete是一款非常实用的前端插件,主要用于实现输入框的自动补全功能,它极大地提升了用户体验,尤其是在处理大量数据时,使得用户能够快速找到所需信息。本文将深入探讨jQuery-autoComplete-1.8.22...

    jQuery文本框input输入关键字自动补全筛选代码.zip

    在这个“jQuery文本框input输入关键字自动补全筛选代码.zip”压缩包中,包含了一个使用jQuery实现的自动补全功能,这是一种常见的用户输入辅助工具,常见于搜索框或者表单中,能够根据用户输入的关键字,实时显示...

    jquery.autocomplete.js 自动补全插件实例

    配合`jquery.autocomplete.css`,这个插件不仅提供了核心的自动补全逻辑,还确保了与页面其他元素的样式协调一致,提供良好的视觉效果。 以下是`jQuery.autocomplete.js`的核心功能和使用方法: 1. **数据源**:...

    jQuery-Autocomplete-exaples.rar

    jQuery Autocomplete 是一个非常流行的 jQuery 插件,它为文本输入框提供了自动补全功能,极大地提升了用户体验。在 Web 应用中,尤其是在需要用户输入搜索关键词或选择特定项时,这个插件非常实用。本篇文章将深入...

    jQuery-Autocomplete-master.rar

    jQuery Autocomplete是一个非常实用的前端插件,它允许开发者为输入框添加自动补全功能,极大地提升了用户体验。这个"jQuery-Autocomplete-master"压缩包提供了一个简单的示例,用于演示如何利用jQuery实现自动补全...

    jquery.autocomplete.js 自动补全

    《jQuery autocomplete.js 实现中文自动补全功能详解》 在Web开发中,用户输入的便捷性和效率至关重要。为了提升用户体验,自动补全(AutoComplete)功能成为了一个不可或缺的元素,尤其是在处理大量数据输入时。...

    jquery-autocomplete 自动完成

    jQuery Autocomplete 是一个非常流行的前端开发插件,它为输入框提供了自动完成的功能,极大地提升了用户在网页上的交互体验。这个插件基于JavaScript库jQuery构建,允许开发者轻松地创建搜索建议、动态填充表单等...

    jquery-autocomplete 自动填充插件参数使用说明

    在Web开发中,为了提升用户体验,自动填充(Autocomplete)功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件,名为jQuery UI Autocomplete,它可以帮助开发者轻松实现这种功能。...

    jquery插件-autocomplete

    而jQuery Autocomplete插件则是一个非常实用的工具,它能够帮助用户在输入框中实现自动补全功能,提高用户体验。虽然jQuery UI库中也有一个Autocomplete组件,但这里我们讨论的是一个独立且简单的jQuery ...

    jQuery Autocomplete例子,自动补全功能

    jQuery Autocomplete是jQuery UI库中的一个强大组件,它为用户提供了在输入框中输入文本时的自动补全功能。这个功能极大地提升了用户体验,尤其是在需要用户输入特定关键字或从大量数据中选择的情况下。让我们深入...

    带数据库的 jquery-autocomplete-php

    【标题】"带数据库的 jquery-autocomplete-php" 涉及到的是一个使用jQuery库实现的自动补全功能,结合PHP和MySQL数据库来提供动态搜索建议。jQuery UI的Autocomplete插件是这个功能的核心,它允许用户在输入框中输入...

    Jquery-autocomplete.jar

    Jquery-autocomplete [ 自动完成 ] ,网页无刷新,与 google baidu 一样

    jquery-autocomplete文档

    jQuery Autocomplete插件是一个非常实用且功能丰富的jQuery扩展,主要用于实现网页表单中输入框的自动补全功能。该插件能够极大地提升用户体验,使用户在输入数据时更加便捷高效。本文档将详细解释其使用方法、参数...

    jquery-autoComplete 处理返回的json对象问题

    其中,jQuery-ui中的autoComplete组件是一个非常实用的功能,它能够帮助用户在输入时自动填充建议,通常用于搜索框或者表单输入。本文将深入探讨如何处理jQuery-autoComplete插件在接收到JSON对象返回数据时可能遇到...

    前端项目-jquery.devbridge-autocomplete.zip

    【描述】"前端项目-jquery.devbridge-autocomplete" 提供了一个高效且可定制的解决方案,适用于任何需要自动补全功能的Web应用,例如搜索框、地址输入、产品推荐等场景。这个项目的核心是利用jQuery的事件处理和DOM...

Global site tag (gtag.js) - Google Analytics