公司原来的项目想润润色,于是就想加个autocomplete功能,就上open-open看了看,找到了jquery的这个插件
使用了一下,还不错
插件主页:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
下载了需要的JS之后,因为我返回的是json数据,所以需要把java对象转成json格式,于是去下载了个
json-lib,但是不知道怎么回事老是提示找不到 net.sf.json.Exception,就换成了JSON Tools.
条件都准备好了,开始敲代码。
简单一点了,写个servlet处理请求了
/**
* 公司的东西,返回的是一个包含map的List
* 假设这里返回了
* result—
* |_map(id,username)
* |_map(id,username)
* ....
* result 是一个ArrayList
* /
List result = helper.exeCustomQuery(sql);
/**
* 调用Json tools 里的 JSONMapper.toJSON(object)方法
* 来生成json格式的字符串,后面那个render(boolean)表是否格式化
* 生成的json字符串
*/
String resultString = JSONMapper.toJSON(result).render(false);
/**
* 后面设置好直接输出即可
* /
response.setContentType("applicatioin/json; charset=UTF-8");
response.setHeader("Cache-Control", "nocache");
response.getWriter().write(jsonString);
下面就到js的编写了,假设这个servlet的请求路径为ajax.do
$().ready(function() {
//NBH是input控件的ID
//这是请求的URL地址,注意这里并没有传参数进去
$("#NBH").autocomplete('ajax.do', {
//这个标示是否为ajax请求,暂且这样理解,具体我也不清楚
multiple: true,
width:150,
max:50,
//这个功能我还不知道,返回到input控件的结果会加上这个,默认的是个','
//我把它设置成了空格
multipleSeparator: ' ',
//解析json数据
parse: function(data) {
$.map(eval(data), function(row) {
return {
data: row,
value: row.id,
//这个就是返回的结果,最终显示在控件上的
result:row.username
}});
},
//格式化下拉框里的格式,跟返回到input控件的结果没关系
formatItem: function(item) {
return item.id + " <" + item.username + ">";
}
});
});
代码注释里提到过,并没有传参数进去,jquery这个控件,默认会吧input控件的值用参数q传过去。也就是说你请求的是ajax.do?q='input里的当前值'
你直接在aciton里面试用他就行了
我们的效果如下(和上面的代码没关系),速度也不错
另外还有一些不明白的地方,
return {
data: row,
value: row.id,//这个是什么?干什么用的?
result:row.username
multipleSeparator: ' ',//这个是什么?除了知道它加到返回到控件的值的最后外,不知道还有什么用途
- 大小: 18.4 KB
分享到:
相关推荐
Jquery autocomplete插件使用
使用Jquery AutoComplete 插件来做自动填充功能,包含本地数组,后台数据等情况
jQuery plugin: Autocomplete 参数及实例 官网:jQuery plugin: Autocomplete 此插件依赖于 jquery 1.2.6 --- jquery 1.8.3 转自:http://www.cnblogs.com/duanhuajian/p/3398904.html
Jquery autocomplete插件的使用示例 ,不用引用网络资源,点开即用,有不懂的可以加我微信:datou-leo。
jquery自动补全插件(jquery autocomplete) 内包含使用说明,前台+后台
利用Jquery.AutoComplete插件及微软提供的ChineseConverter.dll实现汉字、拼音、简拼模糊搜索
jquery autocomplete 自动完成 插件
autocomplete插件原有功能,不能满足需求所以修改了增加了以下几点功能: 1 粘贴文本自动加载数据 2 滚动条滚动到底部加载更多数据 3 与页面插件联动更新数据(清除缓存) 4 增加插件赋值给一个隐藏域,就可以得到文本和...
autocomplete, jQuery自动完成插件,如Google自动完成 电子邮件自动完成文档&演示插件jQuery自动完成插件如谷歌搜索 npm install jquery-autocomplete
1.该js支持jquery的自动补全功能 2.因为jquery-ui是jquery的插件,所以部分版本jquery可能不支持该插件,建议换成内附的jquery.js 3.如有疑惑,请阅读内附的说明文档
jQuery Autocomplete plugin是在jQuery的基础上开发的一套小巧的输入下拉提示插件,这是它的PHP应用实例,大部分功能与HTML格式网页类同,这里增加了一些需要PHp程序配合的内容,它不但有输入提示功能,而且示例本身...
jquery实现autocomplete插件(文本框下拉选项).zip
jquery的一个autocomplete插件 不是ui里的那个,简单实用。
本文实例讲述了jQuery autoComplete插件两种使用方式及动态改变参数值的方法。分享给大家供大家参考,具体如下: 一、一次加载、多次使用: 前端JS代码: /*客户名称自动匹配*/ function customerAutoComplete(){ ...
最近刚开始学jquery,想实现类似GOOGLE搜索时自动显示出相关结果的效果。于是选择了使用jquery autocomplete插件。
jQuery自动完成插件autocomplete.zip
在原有基础上修改了 jquery autocomplete 插件 支持键盘上下键选择
jquery 文本框 自动补全 ajax autocomplete 完整实例
jQuery plugin for autocomplete - jQuery自动完成插件