1) 这是最早的版本,基于jQuery 1.2:
http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
2) 现已迁移到jQuery 1.5,作为jQuery UI Plugins的一个子项目:
http://jqueryui.com/demos/autocomplete/
示例就不往这上面抄了。
有一个问题需要关注:输入法开启下的事件捕获。也就是含有中文的提示功能。
这个功能在Firefox下有些问题,因为插件的事件捕获是通过keydown事件进行的,在其他浏览器下开启输入法,keydown将在选字结束后触发;而Firefox下无论输入法打开与否,每次敲击案件均会触发。
为了说明,给个例子,假如现在输入“王”,击键顺序是“wang1”.
匹配库中有一个词语“王五”
那么事件顺序是:
firefox: w(keydown'w')->a(keydown'a')->n(keydown'n')->g(keydown'g')->1(keydown'1')
其他: wang1(keydown'王')
firefox会以"wang1"而不是"王"作为前缀进行查找,显然,“王五”不会被提示出来。
现在需要做的就是,在中文选词结束后,获取输入的中文,并且以这个中文内容作为自动提示前缀进行搜索。
为此,我们为输入框加一个事件监听就行了:
bind("input", function(){
onChange(0, true);
})
在代码200行处添加这个事件的绑定即可(如果向上追溯,可以看出这段代码是对输入框绑定一系列事件处理函数)。
这个修改基于1) 中的autocomplete插件,2) 的应该差不多,不再赘述。
分享到:
相关推荐
jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html
jQuery AutoComplete插件作为一款轻量级且易于集成的工具,能够帮助开发者轻松地在自己的项目中实现这一功能。本文档旨在详细介绍jQuery AutoComplete插件的安装、配置及其各项参数的使用方法。 #### 二、安装与...
**jQuery Autocomplete插件详解** 在前端开发中,jQuery库为我们提供了丰富的功能和简便的API,使得网页交互变得更加便捷。而jQuery Autocomplete插件则是一个非常实用的工具,它能够帮助用户在输入框中实现自动...
**jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案,它极大地提升了用户体验,尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的,因此,首先需要确保在项目中引入了...
jQuery plugin for autocomplete - jQuery自动完成插件
在标题"jQuery自动完成插件autocomplete.zip"中,我们了解到这是一个基于jQuery库的插件,主要功能是实现自动完成效果。描述中提到的zip文件包含的是该插件的核心组件。 jQuery库是JavaScript的一个轻量级框架,它...
jQuery Autocomplete插件是jQuery UI库中的一个组件,它提供了搜索框自动补全的功能,极大地提高了用户输入的效率和体验。这个插件可以根据用户输入的字符动态地从服务器或者本地数据源获取匹配项,并在输入框下方...
`jquery.autocomplete.js`是jQuery的一个插件,它扩展了原生的jQuery库,增加了自动完成的功能。这个插件主要由两个核心部分组成:一个是前端展示部分,负责渲染和展示联想结果;另一个是数据处理部分,用于获取和...
《jQuery实现Autocomplete插件:文本框下拉选项详解》 在Web开发中,用户界面的交互性与易用性是提升用户体验的关键因素之一。jQuery作为一个轻量级、功能强大的JavaScript库,为开发者提供了丰富的插件,使得创建...
首先,确保在页面中引入了 jQuery 和 Autocomplete 的 JS 文件,然后可以这样初始化 Autocomplete: ```html $(document).ready(function() { $('#myInput').autocomplete({ source: ['Apple', 'Banana', '...
在这个实例中,我们将探讨如何在ASP.NET中使用jQuery插件实现AutoComplete功能,这是一种常见的输入提示技术,可以提升用户输入效率。 AutoComplete通常用于TextBox控件,当用户在输入框中键入文字时,系统会根据已...
**jQuery AutoComplete 插件详解** jQuery AutoComplete 是一个非常流行的前端插件,它为输入框提供了自动补全的功能,极大地提升了用户在网页上的输入体验。这个插件基于 jQuery 库,因此,使用前需要先引入 ...
《jQuery Autocomplete 插件参数使用详解》 在Web开发中,为了提升用户体验,自动填充(Autocomplete)功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件,名为jQuery UI ...
`jQuery-autocomplete` 是一个基于 jQuery 的开源插件,用于实现自动补全功能。这个插件使得在网页表单输入框中快速、高效地提供下拉建议变得简单易行,提高了用户界面的交互性和用户体验。它广泛应用于搜索引擎、...
在本篇讨论中,我们将深入理解jQuery的Autocomplete插件,以及如何在实际项目中应用。 ### 1. jQuery UI Autocomplete jQuery UI库提供了Autocomplete组件,它是基于jQuery核心功能构建的。要使用这个组件,首先...
**jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件,它为HTML输入框提供了自动补全功能,极大地提升了用户体验。这个插件基于jQuery库,结合Ajax技术,能够实时从服务器获取...
2. jQuery Autocomplete:自动完成。 3. jQuery Autocomplete Mod:改进版自动完成。 4. jQuery Autocompleter:快速搜索建议。 以上只列举了部分jQuery插件,实际应用中还有更多丰富的选择,可以根据具体需求选择...
1. **源码实现**:实现自动完成功能可能涉及JavaScript(如jQuery UI的Autocomplete插件)、Vue.js、React或Angular等前端框架,也可能涉及后端语言如Java(Spring Boot的Thymeleaf模板引擎)、Python(Django或...
《jQuery Autocomplete插件详解与应用》 在Web开发中,提供用户友好的输入体验是至关重要的,而jQuery Autocomplete插件就是实现这一目标的有效工具。这个插件,以其便捷性和强大的功能,使得在文本框中实现自动...
jQuery UI Autocomplete是一款基于jQuery UI库的插件,专门用于实现自动完成功能。这个组件在网页表单中尤其有用,它可以为用户提供实时的搜索建议,提升用户输入体验,节省用户时间并减少输入错误。在网页应用中,...