jquery.autocomplete自动完成插件
$(document).ready(function() {
//在这里datafriends绑定JS的数据源
$("#txtUser").autocomplete(datafriends,
{
max: 12,
autoFill: false,
mustMatch: false,
matchContains: false,
scrollHeight: 500,
formatItem: function(data, i, total) {
return data[0];
}
}).result(function(event,item){
location.href="http://www.zhiliren.net/";
});
});
配置项介绍:
1. max //autoComplete下拉显示项目的个数.默认为10
2. autoFill //要不要在用户选择时自动将用户当前鼠标所在的值填入到文本框,默认为false
3. mustMatch //如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框,默认为false
4. matchContains //决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用
5. scrollHeight //自动完成提示的卷轴高度用像素大小表示,默认为180
6. formatItem //对匹配的每一行数据使用此函数格式化,返回值是显示给用户的数据内容。参数data表示服务器返回来的结果的数组,i表示当前行数,total表示搜索到的对应个数(总记录数),如果不指定直接返回服务器的结果值
7. formatResult //此函数是用户选中后返回的数据格式,比如只返回row.name或row.id等,参数与formatItem相同
8. formatMatch //对每一行数据使用此函数格式化需要查询的数据格式,返回值是给内部搜索算法使用的。实例中用户看到的匹配结果是formatItem中设置的格式,参数与formatItem相同
9. result 此事件会在用户选中某一项后触发,参数为 event,data,formatted。event为事件对象,data为选中的数据行,formatted的官方解释的是formatResult函数的返回值,但是实验结果是formatMatch的返回值
匹配中文问题:
如果所下版本的autocomplete控件对中文搜索存在bug的话,请将keydown事件修改为keyup事件。
分享到:
相关推荐
`jquery.autocomplete.js`是jQuery的一个插件,它扩展了原生的jQuery库,增加了自动完成的功能。这个插件主要由两个核心部分组成:一个是前端展示部分,负责渲染和展示联想结果;另一个是数据处理部分,用于获取和...
**jQuery Autocomplete.js 插件使用详解** jQuery Autocomplete.js 是一个非常实用的插件,它为HTML输入框提供了自动补全功能,极大地提升了用户体验。这个插件基于jQuery库,结合Ajax技术,能够实时从服务器获取...
`jQuery.autocomplete.js` 是一个流行的JavaScript库jQuery的扩展插件,主要用于实现输入框的自动补全功能。这个插件极大地增强了用户在网页上的交互体验,尤其在处理大量可选项时,用户可以通过输入部分文字快速...
首先,`jquery.autocomplete.js`是jQuery Autocomplete插件的核心JavaScript文件,它提供了一套完整的事件驱动机制和接口,用于处理用户输入时的实时匹配和显示建议。这个插件基于jQuery框架,意味着它能够很好地与...
《自动补全-jquery.autocomplete.js》 在Web开发中,自动补全功能是一种非常实用且常见的用户体验优化手段。它通常被应用于搜索框、表单输入等场景,能够帮助用户快速找到并选择他们想要的选项,提高输入效率。在...
《jQuery.autocomplete自动提示插件详解》 在Web开发中,提供用户友好的输入提示功能是一种常见的需求,例如搜索引擎的自动补全、电子商务网站的商品搜索等。jQuery库为我们提供了丰富的插件来实现这一功能,其中`...
首先,让我们明确一下标题中的“jquery.autocomplete.js”——这是一个基于jQuery库的Autocomplete插件,它的主要功能是为HTML文本输入框添加自动完成的功能。它通过动态加载数据并根据用户输入的内容进行匹配,从而...
jQuery Validate用于表单验证,Metadata插件帮助提取DOM元素的元信息,Autocomplete提供了自动补全功能,而jQuery UI则提供了丰富的用户界面组件。掌握这些工具的使用,对于提高网页应用的交互性和用户体验具有重要...
**jQuery的Autocomplete插件**是用于实现网页输入框自动补全功能的一种高效解决方案,它极大地提升了用户体验,尤其是在用户需要从大量数据中选择时。这个插件是基于jQuery库的,因此,首先需要确保在项目中引入了...
在Web开发中,提供用户友好的输入提示功能是一种常见的需求,jQuery Autocomplete插件为此提供了完美的解决方案。这个类包“jquery.autocomplete.zip”包含了实现这一功能所需的两个核心文件:`jquery.autocomplete....
《jQuery Autocomplete 插件参数使用详解》 在Web开发中,为了提升用户体验,自动填充(Autocomplete)功能被广泛应用于搜索框、表单输入等场景。jQuery库提供了一个强大的Autocomplete插件,名为jQuery UI ...
在标题"jQuery自动完成插件autocomplete.zip"中,我们了解到这是一个基于jQuery库的插件,主要功能是实现自动完成效果。描述中提到的zip文件包含的是该插件的核心组件。 jQuery库是JavaScript的一个轻量级框架,它...
- **jquery.autocomplete.js**:这是核心的 JavaScript 文件,包含了 Autocomplete 插件的所有功能代码。通过调用这个插件,我们可以为指定的输入框添加自动补全功能,并设置各种参数,如数据源、匹配算法、回调...
接着,引入 `jquery.autocomplete.js` 文件,这是插件的核心实现。同时,为了美观和布局,还需要引入 `jquery.autocomplete.css` 文件,该文件定义了插件的样式规则。 ### 2. 使用方法 要在网页上使用 `jQuery ...
<script type="text/javascript" src="ui/jquery.ui.autocomplete.js"> ``` 接下来,创建一个用于输入的文本框,这将是用户触发自动完成的地方: ```html ``` 然后,使用jQuery来初始化autocomplete插件,设置...
jQuery AutoComplete 是一个非常流行的前端插件,它为输入框提供了自动补全的功能,极大地提升了用户在网页上的输入体验。这个插件基于 jQuery 库,因此,使用前需要先引入 jQuery。AutoComplete 的主要功能是根据...
2. **初始化插件**:为需要实现自动补全的输入框添加`id`,然后在文档加载完成后调用插件,指定数据源和相关配置。 ```html $(document).ready(function(){ $('#searchBox').autocomplete({ source: ['北京', '...
`jQuery.autocomplete` 是一个基于 jQuery 的插件,用于实现自动补全功能,它极大地简化了在网页上创建高效、动态的输入字段的过程。这个插件通常被用于搜索框,帮助用户快速找到他们想要的选项,提高用户体验。在这...