Jquery 插件jquery autocomplete使用
工作中涉及到 需要带有输入提示的功能（如google 搜索提示那样）网上找了一些资料，最好选定jquery autocomplete 来实现，下面介绍一下使用已经，项目中遇到的一写问题
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<%String root=request.getContextPath();%>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="<%=root%>/js/jquery.js"></script>
<script type='text/javascript' src='<%=root%>/js/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="<%=root%>/js/jquery.autocomplete.css" />
</head>
<script type="text/javascript">
$().ready(function() {
function parseFn(data) {
var rows = [];
for(var i=0; i<data.length; i++){
rows[rows.length] = {
data:data[i], //下拉框显示数据格式
value:data[i].name, //选定后实际数据格式
result:data[i].name //选定后输入框显示数据格式
};
}
return rows;
}
//var myJSONObject =[{"id":"1","name":"bj"},{"id":"2","name":"sh"},{"id":"3","name":"天津"},{"id":"4","name":"重庆"},{"id":"5","name":"广州"},{"id":"6","name":"深圳"},{"id":"7","name":"南京"},{"id":"8","name":"济南"},{"id":"9","name":"杭州"},{"id":"10","name":"苏州"}];
var myJSONObject =[{"id":"ak540","name":"zhangliang2"},{"id":"akc696","name":"zhangliang"}];
$("#suggest3").autocomplete('autoComplete.jsp', {
multiple: true,
autoFill: true,
mustMatch :true,
matchContains: true,
//extraParams:{q:function(){return $("#this").val();}},
dataType: 'json',
parse:parseFn,
formatItem: function(row,i,max) {
return row.name;
},
formatMatch: function(row,i,max){
return row.name;
},
formatResult: function(row,i,max){
return row.name;
}
// }).result(function(event, item, formatted) {//把返回的结果内容显示在其他文本框上
// $("#ortherid").val(item.name);
});
});
</script>
<body>
<label>Multiple Cities (local):</label>
<textarea id='suggest3' cols='40' rows='3'></textarea>
<div id="ortherid"></div>
</body>
</html>
这里主要是用到了jquery.autocomplete.js 里面的$("#suggest3").autocomplete 方法（这方面的资料比较多，具体可以网上搜索，我也是参考官方例子改写的官方网的DEMO 地址：http://jquery.bassistance.de/autocomplete/demo/
主要从后台返回的结果是以JSON 的数据格式返回的
autoComplete.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>
<%@ page import="com.autoComplete.*"%>
<%
City city = new City();
String query =request.getParameter("q");
//query= new String(query.getBytes("ISO-8859-1"), "UTF-8");
String json=city.toJoson(query);
response.setContentType("application/json;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
try {
PrintWriter out2 = response.getWriter();
out2.write(json);
} catch (IOException e) {
e.printStackTrace();
}
%>
后台JAVA 代码
City
package com.autoComplete;
import java.util.ArrayList;
import java.util.List;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import net.sf.json.JSONArray;
/***********************************************************************
*
* City.java
* @copyright Copyright: 2009-2012
* @creator 周辉<br/>
* @create-time 2010-8-5 上午11:18:58
* @revision $Id: *
***********************************************************************/
public class City {
/**
*
* @return
*/
public List<CityBean> getCity() {
List<CityBean> list = new ArrayList<CityBean>();
CityBean cityBean = new CityBean();
cityBean.setId("1");
cityBean.setName("bj");
list.add(cityBean);
CityBean cityBean1 = new CityBean();
cityBean1.setId("2");
cityBean1.setName("sh");
list.add(cityBean1);
CityBean cityBean2 = new CityBean();
cityBean2.setId("3");
cityBean2.setName("天津");
list.add(cityBean2);
CityBean cityBean3 = new CityBean();
cityBean3.setId("4");
cityBean3.setName("重庆");
list.add(cityBean3);
CityBean cityBean4 = new CityBean();
cityBean4.setId("5");
cityBean4.setName("广州");
list.add(cityBean4);
CityBean cityBean5 = new CityBean();
cityBean5.setId("6");
cityBean5.setName("深圳");
list.add(cityBean5);
CityBean cityBean6 = new CityBean();
cityBean6.setId("7");
cityBean6.setName("南京");
list.add(cityBean6);
CityBean cityBean7 = new CityBean();
cityBean7.setId("8");
cityBean7.setName("济南");
list.add(cityBean7);
CityBean cityBean8 = new CityBean();
cityBean8.setId("9");
cityBean8.setName("杭州");
list.add(cityBean8);
CityBean cityBean9 = new CityBean();
cityBean9.setId("10");
cityBean9.setName("苏州");
list.add(cityBean9);
return list;
}
public String toJoson(String query) {
List<CityBean> list = getCity();
List<CityBean> list2 = search(query, list);
//JsonConfig jsonConfig = new JsonConfig();
JSONArray jsonArray = JSONArray.fromObject(list2);
String json = jsonArray.toString();
return json;
}
public List<CityBean> search(String name, List<CityBean> list) {
List<CityBean> results = new ArrayList<CityBean>();
Pattern pattern = Pattern.compile(name, Pattern.CASE_INSENSITIVE);
for (int i = 0; i < list.size(); i++) {
Matcher matcher = pattern.matcher(((CityBean) list.get(i))
.getName());
if (matcher.find()) {
results.add(list.get(i));
}
}
return results;
}
}
CityBean 在这里就不贴了
运行效果
我这里项目中需要多列 所以用了multiple: true, 这个属性，如下效果
这里我发现这个控件一写问题:
1
比如第二个记录南京，前面会有一个空格 （有兴趣的朋友可以仔细跑一下发现这个问题，后面第二 第三个 以及后续的数据都会有空格，用SPLIT 分割取得数据的时候一定要注意TRIM了）
2
下面运行提示后用鼠标点击或者回车选中响应 鼠标和回车事件（没有问题）
IE下面firefox 只能用回车选中，用鼠标选中后，数据会乱如下效果 （官网的DEMO也有类似问题）：
写好DEMO 觉的挺容易的马上移植项目中，结果又遇到不少的问题
1 系统中用了prototype.js 在加入jquery.js 页面效果出不来，后来找到问题了prototype.js 和jquery.js冲突
官网下载的jquery.js 是1.2.6版本的，网上有说法改写jquery 的$结果没搞定，后来升级jquery.js 1.4.2 问题解决
2我们系统中用了sitemesh 做装饰，页面头尾都不需要关心的，autoComplete.jsp 返回的结果不是JSON 后又给装饰后加了头尾HTML 数据流了，这样autoComplete控件就无效了
一定要确定在服务端返回的数据流最终 是JSON 格式数据
总结：项目中往往和简单的DEMO 在运行环境和其他。。又不同的地方，需要具体问题具体分析解决之