autocomplete-jquery最强大的自动完成插件
2012-12-24 15:50
447 查看
这款自动完成插件委实太强大了。demo演示了不下于其5种特性。
自定义列表项的数据格式(格式化数据)
支持本地、远程数据搜索
拥有自定义事件
完美融合thickbox
完备的API和debug
支持多选
支持email自动完成
点此下载
(找不到其官方页面,我简要说明下其API,也是自己摸索的,不对的地方请指正。)
$("#suggest1").autocomplete(cities);
这是最简单的调用方式。接受唯一数据参数:cities(是个数组,详见demo文件夹下的localdata.js)。这是调用本地数据的例子。
$("#singleBirdRemote").autocomplete("search.php", {
width: 260,
selectFirst: false
});
这是调用远程数据的例子。第一个参数为后台脚本路径。第二个为配置参数对象字面量。width:宽度,selectFirst:是否选中菜单第一个元素。
$("#month").autocomplete(months, {
minChars: 0,
max: 12,
autoFill: true,
mustMatch: true,
matchContains: false,
scrollHeight: 220,
formatItem: function(data, i, total) {
// don't show the current month in the list of values (for whatever reason)
if (data[0] == months[newDate().getMonth()])
return false;
return data[0];
}
});
这是调用本地数据的例子。重点来说明下其中的几个特殊有用的参数。
scrollHeight:菜单高度
autoFill:自动填充
formatItem:非常有意思的回调函数。作用是格式化菜单中的元素。例子中这个函数的作用是:不在列表菜单中显示当前月,起到了过滤的作用。
$("#suggest13").autocomplete(emails, {
minChars: 0,
width: 310,
matchContains: true,
autoFill: false,
formatItem: function(row, i, max) {
return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
},
formatMatch: function(row, i, max) {
return row.name + "" + row.to;
},
formatResult: function(row) {
return row.to;
}
});
这是自动完成email的例子。重点讲解下其回调函数。(这里的数据时各数组,数组的每个元素为对象字面量。)
formatItem:上一个例子有提到过,重点说明下其三个参数:row:一行数据({}),i:第几行,max:总行数。这里返回自定义格式的数据。
formatMatch:从名称来看为格式化匹配的回调函数。用法目前偶还不知。
formatResult:格式化结果。可以看到这里面但选择完后输入框显示的只是email,而没有列表中的名称+email
相关文章推荐
- autocomplete-jquery最强大的自动完成插件
- jquery autocomplete 自动完成插件及插件常用属性及项目案例
- jquery自动完成插件(autocomplete)应用之PHP版
- 使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配
- jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)
- 使用jQuery Autocomplete(自动完成)插件,结合ajax实现搜索框匹配
- PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
- 推荐一款超强大的基于Angularjs的自动完成(Autocomplete)标签及标签组插件–ngTagsInput
- jquery autocomplete 自动完成插件常见错误-火狐不支持中文、查询数据存在缓存等
- jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)
- jquery autocomplete 自动完成插件
- jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)
- 发布自己写的jQuery自动完成的插件(AutoComplete)(28日更新)
- 使用jQuery Autocomplete(自动完成)插件
- jQuery.Autocomplete(新版本)自动完成插件在中文应用时的BUG修正
- JQuery 插件之Ajax Autocomplete(ajax自动完成)
- .net 使用jQuery Autocomplete(自动完成)插件结合ajax
- jQuery 插件autocomplete自动完成应用(自动补全)(asp.net后台)
- jquery 自动完成 Autocomplete插件汇总
- jQuery自动完成插件Autocomplete使用实例