使用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: ' ',//这个是什么？除了知道它加到返回到控件的值的最后外，不知道还有什么用途
页:
[1]