使用Jquery的AutoComplete插件

公司原来的项目想润润色，于是就想加个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: ' ',//这个是什么？除了知道它加到返回到控件的值的最后外，不知道还有什么用途