1、在使用该插件前先在页面引入以下js文件:
<script type="text/javascript" src="${basePath}ps/js/jquery/jquery.js"></script>
<script type="text/javascript" src="${basePath}js/autocomplete/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="${basePath}js/autocomplete/jquery.ajaxQueue.js"></script>
<script type="text/javascript" src="${basePath}js/autocomplete/thickbox-compressed.js"></script>
<script type="text/javascript" src="${basePath}js/autocomplete/jquery.autocomplete.js"></script>
引入以下css文件:
<link rel="stylesheet" href="${basePath}js/autocomplete/jquery.autocomplete.css" type="text/css" />
<link rel="stylesheet" href="${basePath}js/autocomplete/thickbox.css" type="text/css" />
2、页面js关键代码:
$().ready(function() {
$("#nameKey").autocomplete("${basePath}/search/productAutoComplete.action", {
multiple: false,
width:150,
max:50,
multipleSeparator: '',
dataType: 'json',
//加入对返回的json对象进行解析函数,函数返回一个数组
parse: function(data) {
var rows = [];
for(var i=0; i<data.length; i++){
rows[rows.length] = {
data:data[i].productName,
value:data[i].productName,
result:data[i].productName
};
}
return rows;
},
formatItem: function(row, i, n) {
return row;
}
});
});
解析: 1、nameKey对应的是页面上input的id,如下:
<input type="text" value="${nameKey}" id="nameKey" name="nameKey" class="mainkey" title="产品关键字"/>
2、向后台获取的是一个json格式的数据,后台处理关键代码如下:
public String productAutoComplete() throws Exception{
super.getResponse().setCharacterEncoding("utf-8");
super.getResponse().setContentType("text/html; charset=utf-8");
PrintWriter out = super.getResponse().getWriter();
nameKey=new String(getRequest().getParameter("q").getBytes("ISO8859_1"),"utf-8");
List<ProductInfo> results=super.productInfoService.findAllNeedProductInfo(nameKey, 0, 10);
List<ProductAutoView> pavList = new ArrayList<ProductAutoView>();
for(ProductInfo pi : results){
pavList.add(new ProductAutoView(pi.getName()));
}
JSONArray jsonArray = JSONArray.fromObject(pavList);
out.print(jsonArray.toString());
out.flush();
out.close();
return null;
}
注意: 页面传过来的参数名默认是"q",为了防止中文乱码,还要对数据进行转码,如下:
nameKey=new String(getRequest().getParameter("q").getBytes("ISO8859_1"),"utf-8");
3、当输入功能时,返回给客户端的数据如下:
[{"productName":"未分类-未分类笔记本包-劲量多功能充 XP1000"},{"productName":"多功能一体机-惠普-HP Deskjet B209a 多功能一体机"},{"productName":"多功能一体机-惠普-HP 2488 喷墨一体机"},{"productName":"多功能一体机-惠普-HP J4660喷墨一体机"},{"productName":"多功能一体机-惠普-HP OJ J3606 CN552A 多功能传真一体机"},{"productName":"多功能一体机-惠普-HP OJ 4500 CM754A desktop 彩色传真一体机(标准版)"},{"productName":"办公用品-齐心文具-A615 多功能票夹"},{"productName":"多功能一体机-惠普-HP 4308喷墨一体机"},{"productName":"多功能一体机-爱普生-EPSON ME330 喷墨一体机"},{"productName":"IP09-AMB-4001A 多功能鼠标垫"}]
4、页面体现如下:
- 大小: 8.8 KB
分享到:
相关推荐
jquery autocomplete下载.rar
Jquery AutoComplete
jquery.autocomplete.js 、jquery.autocomplete.css
JQuery autocomplete ajax分页,对源码稍微修改了下
在输入页面利用JQuery获取用户输入,然后通过AJAX异步发送到处理页面,处理页面接收到值后进行模糊匹配查询,然后将结果返回,输入页收到返回的数据后在处理,并生成相应的页面显示在页面上。若是jquery ...
jquery-autocomplete搜索框自动完成的中文文档,上手快,轻便,功能强大
Jquery autocomplete插件使用
jquery autocomplete 动态补全例子支持中文 ajax传递json数据 文件里有json数据拼接
jquery-autocomplete 可用
jQuery Autocomplete,百度搜索框提示效果。
jquery autocomplete 所需js文件及样式。 实现仿百度输入查询下拉功能。
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.js 是一款优秀的开源JS,支持自动完成,不过如果是中文失效。原因是由于中文编码不一致引起的,修改源文件中AJAX请求中的编码,加上escape编码后,在后台用Server.URLDecode解码后,则中文也...
jquery自动补全插件(jquery autocomplete) 内包含使用说明,前台+后台
NULL 博文链接:https://zhaoaiqing.iteye.com/blog/333869
jQuery autocomplete 自动加载
jquery autocomplete官方版(源代码+示例) 自动补充功能非常实用
包含jquery.autocomplete相关js文档
NULL 博文链接:https://bask.iteye.com/blog/766441