jquery-autocomplete学习

一、用前必备
官方网站：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
当前版本：1.0.2
需要JQuery版本：1.2.6

二、使用
<script src="./jquery-1.3.2.js" type="text/javascript"></script>
<script src="./jquery.autocomplete.js" type="text/javascript"></script>
<link rel="stylesheet" href="./jquery.autocomplete.css" />

autocomplete( url or data, options )  Returns: jQuery 
让一个input或textarea有autocomplete功能

例子

Js代码
var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");  
$("#example").autocomplete(data); 
 
以上的例子就是为id为example添加autocomplete

var emails = [
    { name: "Peter Pan", to: "peter@pan.de" },
    { name: "Molly", to: "molly@yahoo.com" },
    { name: "Forneria Marconi", to: "live@japan.jp" },
    { name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
    { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
    { name: "Don Corleone", to: "don@vegas.com" },
    { name: "Mc Chick", to: "info@donalds.org" },
    { name: "Donnie Darko", to: "dd@timeshift.info" },
    { name: "Quake The Net", to: "webmaster@quakenet.org" },
    { name: "Dr. Write", to: "write@writable.com" }
];
//emails的数组格式如上，formatItem代表的是显示的格式，formatMatch表示匹配的内容，formatResult表示结果的内容

$("#suggest13").autocomplete(emails, {
    minChars: 0,
    width: 310,
    matchContains: true,
    autoFill: false,
    formatItem: function(row, i, max) {
        return i + "/" + max + ": \"" + row.name + "\" [" + row.to + "]";
    },
    formatMatch: function(row, i, max) {
        return row.name + " " + row.to;
    },
    formatResult: function(row) {
        return row.to;
    }
});

三、参数说明：
* minChars (Number):
    在触发autoComplete前用户至少需要输入的字符数.Default: 1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表
* width (Number):
    指定下拉框的宽度. Default: input元素的宽度
* max (Number):
    autoComplete下拉显示项目的个数.Default: 10
* delay (Number):
    击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10
* autoFill (Boolean):
    要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: false
* mustMatch (Booolean):
    如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false
* matchContains (Boolean):
    决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false
* selectFirst (Boolean):
    如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true
* cacheLength (Number):
    缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10
* matchSubset (Boolean):
    autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是打开这个选项以减轻服务器的负担以提高性能.只会在缓存长度大于1时有效.Default: true
* matchCase (Boolean):
    比较是否开启大小写敏感开关.使用缓存时比较重要.如果你理解上一个选项,这个也就不难理解,就好比foot要不要到FOO的缓存中去找.Default: false
* multiple (Boolean):
    是否允许输入多个值即多次使用autoComplete以输入多个值. Default: false
* multipleSeparator (String):
    如果是多选时,用来分开各个选择的字符. Default: ","
* scroll (Boolean):
    当结果集大于默认高度时是否使用卷轴显示 Default: true 
* scrollHeight (Number):
    自动完成提示的卷轴高度用像素大小表示  Default: 180  
* formatItem (Function):
    为每个要显示的项目使用高级标签.即对结果中的每一行都会调用这个函数,返回值将用LI元素包含显示在下拉列表中. Autocompleter会提供三个参数(row, i, max): 返回的结果数组, 当前处理的行数(即第几个项目,是从1开始的自然数), 当前结果数组元素的个数即项目的个数. Default: none, 表示不指定自定义的处理函数,这样下拉列表中的每一行只包含一个值.
* formatResult (Function):
    和formatItem类似,但可以将将要输入到input文本框内的值进行格式化.同样有三个参数,和formatItem一样.Default: none,表示要么是只有数据,要么是使用formatItem提供的值.
* formatMatch (Function):
    对每一行数据使用此函数格式化需要查询的数据格式. 返回值是给内部搜索算法使用的. 参数值row
* extraParams (Object):
    为后台(一般是服务端的脚本)提供更多的参数.和通常的作法一样是使用一个键值对对象.如果传过去的值是{ bar:4 },将会被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假设当前用户输入了foo). Default: {}
* result (handler)  Returns: jQuery 
    此事件会在用户选中某一项后触发，参数为：
    event: 事件对象. event.type为result.
    data: 选中的数据行.
    formatted:formatResult函数返回的值
    例如：
    $("#singleBirdRemote").result(function(event, data, formatted) {
  //如选择后给其他控件赋值，触发别的事件等等
 });

四、注意问题：

1.网上有人说对中文的检索时处理有问题，经过测试此版本没有问题^-^

2.在使用远程地址时，它默认传入的参数是：q（输入值），limit（返回结果的最大值），可以使用extraParams传入其他的参数

3.autocomplete在使用ajax传递参数时，默认使用了get方式传递，也实在是没有找到可以通过参数提交post方式的办法。
解决方式1：在使用ajax的get方式传递中文时，使用new String(request.getParameter("q").getBytes("iso8859-1"),"utf-8")获得参数值
解决方式2：修改jquery.autocomplete.js代码，把get方式修改为post方式，然后参见之前ajax解决中文乱码的问题的文章

4.在使用ajax方式时，远程地址返回结果是：使用\n分割每行数据，每行数据中使用|分割每个元素

一、测试环境
jQuery:1.3.2
tomcat:5.5.17

二、测试方法

1.使用get方式

服务器端java代码：
String name = new String(request.getParameter("name").getBytes("iso8859-1"),"utf-8");

客户端js代码：
$.ajax({url: "2.jsp",type: "get",data: {name:"中文"},success: function(response){
        alert(response);
}});
结果：正确显示

$.ajax({url: "2.jsp",type: "get",data: "name=中文",success: function(response){
        alert(response);
}});
结果：乱码

$.get("2.jsp", { name: "中文" },function(response){
    alert(response);
});
结果：正确显示

$.get("2.jsp", "name=中文",function(response){
    alert(response);
});
结果：乱码

2.post方式

服务器端java代码：
request.setCharacterEncoding("UTF-8");  
String name = request.getParameter("name");

客户端js代码：
$.ajax({url: "3.jsp",type: "post",data: "method=testAjaxPost&name=中文",success: function(response){
    alert(response);
}});
结果：正确显示

$.ajax({url: "3.jsp",type: "post",data: {name:"中文"},success: function(response){
    alert(response);
}});
结果：正确显示

$.post("3.jsp", { name: "中文" },function(response){
    alert(response);
});
结果：正确显示

$.post("3.jsp", "name=中文",function(response){
    alert(response);
});
结果：正确显示

三、使用filter

public void doFilter(ServletRequest request, ServletResponse response,
        FilterChain chain) throws IOException, ServletException {
    HttpServletRequest req = (HttpServletRequest) request;
    if (req.getHeader("X-Requested-With") != null && req.getHeader("X-Requested-With").equalsIgnoreCase("XMLHttpRequest"))) {
        request.setCharacterEncoding("utf-8");
    } else {
        request.setCharacterEncoding("gbk");
    }
    chain.doFilter(request, response);
}

jQuery在使用ajax的时候会在header中加入X-Requested-With，值为：XMLHttpRequest，filter中判断是jQuery的ajax请求时就把字符编码设为utf8，这样可以解决post提交中的中文乱码问题，不需要在代码中设置request.setCharacterEncoding("UTF-8");

对于get方式的中文乱码问题，建议不使用get方式提交中文，统统改为post ^-^

prototype使用ajax中文乱码的解决
使用环境：
prototype.js 1.5.0_rc1
Tomcat 5.5.17

一、不使用任何框架
 
1.get方式

    js代码
    try {
        var url = "2.jsp";
        var pars = "name=中文get方式";
        var myAjax = new Ajax.Request(url,{method: 'get', parameters: pars, onComplete: function(response) {
            eval(response.responseText);           
        }});
    } catch(e) {
        alert(e);
    }
    2.jsp中
    System.out.println(new String(request.getParameter("name").getBytes("iso8859-1"),"gbk"));
    返回正常的中文
2.post方式

    js代码
    try {
        var url = "3.jsp";
        var pars = "name=中文post方式";
        var myAjax = new Ajax.Request(url,{method: 'post', parameters: pars, onComplete: function(response) {
            eval(response.responseText);           
        }});
    } catch(e) {
        alert(e);
    }
    3.jsp中
    request.setCharacterEncoding("UTF-8");
    System.out.println(request.getParameter("name"));

    返回正常的中文
 
测试页面代码：
1.jsp
<%@ page contentType="text/html;charset=gbk"%>
<html>
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script type="text/javascript" src="prototype.js"></script>
<script language="JavaScript">
function testAjaxGet() {
    try {
        var url = "2.jsp";
        var pars = "name=中文get方式";
        var myAjax = new Ajax.Request(url,{method: 'get', parameters: pars, onComplete: function(response) {
            eval(response.responseText);           
        }});
    } catch(e) {
        alert(e);
    }
}
function testAjaxPost() {
    try {
        var url = "3.jsp";
        var pars = "name=中文post方式";
        var myAjax = new Ajax.Request(url,{method: 'post', parameters: pars, onComplete: function(response) {
            eval(response.responseText);           
        }});
    } catch(e) {
        alert(e);
    }
}
</script>
</head>
<body>
<input type="button" name="test" value="测试Ajax中文get方式" onclick="testAjaxGet();">
<input type="button" name="test" value="测试Ajax中文post方式" onclick="testAjaxPost();">
</body>
</html>

2.jsp
 
<%@ page contentType="text/html;charset=gbk"%>
alert('<%=(new String(request.getParameter("name").getBytes("iso8859-1"),"gbk"))%>');
 
3.jsp
 
<%@ page contentType="text/html;charset=gbk"%>
<%
request.setCharacterEncoding("UTF-8");  
%>
alert('<%=request.getParameter("name")%>');

如果在应用中使用filter设置了request.setCharacterEncoding("GBK");
代码如下：
public class CharacterEncodingFilter implements Filter {
 public void init(FilterConfig config) throws ServletException {
 
 }
 
 public void doFilter(ServletRequest request, ServletResponse response,
   FilterChain chain) throws IOException, ServletException {
  request.setCharacterEncoding("GBK");
  chain.doFilter(request, response);
 }
 public void destroy() {
 
 }
}
以上方式仍然适用

二、使用struts框架1.2

1.filter代码如下：

public class CharacterEncodingFilter implements Filter {
 public void init(FilterConfig config) throws ServletException {

 }

 public void doFilter(ServletRequest request, ServletResponse response,
   FilterChain chain) throws IOException, ServletException {
  HttpServletRequest req = (HttpServletRequest) request;
  if (req.getHeader("RequestType") != null
    && req.getHeader("RequestType").equalsIgnoreCase("ajax")) {
   request.setCharacterEncoding("utf-8");
  } else {
   request.setCharacterEncoding("gbk");
  }
  chain.doFilter(request, response);
 }

 public void destroy() {

 }
}

2.get方式
    js代码
    try {
        var url = "testAction.do";
        var pars = "method=testAjaxGet&name=一二三";
        var myAjax = new Ajax.Request(url,{method: 'get', parameters: pars, onComplete: function(response) {
            eval(response.responseText);           
        }});
    } catch(e) {
        alert(e);
    }
    action代码
 System.out.println(new String(request.getParameter("name").getBytes("iso8859-1"),"gbk"));
 System.out.println(new String(theForm.getName().getBytes("iso8859-1"),"gbk"));
    返回正常的中文

3.post方式
    js代码
    function testAjaxPost() {
        try {
            var url = "testAction.do";
            var pars = "method=testAjaxPost&name=一二三";
            var myAjax = new Ajax.Request(url,{method: 'post', requestHeaders:['RequestType','ajax'],parameters: pars, onComplete: function(response) {
                eval(response.responseText);           
            }});
        } catch(e) {
            alert(e);
        }
    }
    action代码
    System.out.println(request.getParameter("name"));
    System.out.println(theForm.getName());
    返回正常的中文

关键点就在于，当使用ajax的post方式时，filter中的编码要制定utf-8，所以需要在js代码中加入requestHeaders指定RequestType为ajax已利于在filter中进行判断设置正确的编码。

注：使用prototype-1.6.0时，ajax的get方式时中文编码需要由

new String(request.getParameter("name").getBytes("iso8859-1"),"gbk")

改为：

new String(request.getParameter("name").getBytes("iso8859-1"),"utf-8") 

post方式编码不变

转载一个最后一个字是乱码问题的解释：

ajax使用utf-8 post 表单数据，而你的tomcat却认为它是gbk....
这就问题的来源

=>任意给定的3个汉字
=>UTF-8使用9个bytes编码之(123|456|789)
=>这9个bytes通过网络传给tomcat
=>tomcat认为这9个字节是gbk编码(因为你配置了tomcat)
=>gbk汉字编码规则12|34|56|78|9
=>构建string时至少最后一个字节不能正确解析为汉字，此时使用?代替
=>在对这个至少带一个问号的string.getBytes("gbk")时，肯定将出现问号ascii码(63)的byte
=>以utf-8构造string时，遇到63的地方肯定输出?
=>产生了你说的现象

public static void main(String[] args) throws UnsupportedEncodingException {
    //给定某3个汉字
    String src = "你好啊";
    //String src = "一二三";
    
    //浏览器进行utf-8编码，并传送到服务器
    byte[] bytes1 = src.getBytes("utf-8");
    System.out.println(bytes1.length);//9
    
    //tomcat以gbk方式解码(这个片段的说明仅针对gbk处理汉字的情况)
    //如果一对汉字字节不符合gbk编码规范，则每个字节使用'?'(ascii 63)代替
    //万幸的话，只是最后一个(第9个)字节因不能成对,变成问号(比如当src="你好啊"时)
    //不幸的话，中间某些字节就通不过gbk编码规范出现'?'了(比如当src="一二三"时)
    //总之temp的最后一位必定是问号'?'
    String temp = new String(bytes1, "gbk"); 
    
    //你的action中的代码
    //由于以上的tomcat以gbk解释utf-8不能成功
    //所以此时bytes2和bytes1不一样
    byte[] bytes2 = temp.getBytes("gbk");
    System.out.println(bytes2.length);
    for (int i = 0; i < bytes1.length; i++) {
        System.out.print(bytes1[i] & 0xff);
        System.out.print("\t");
    }
    System.out.println();
    for (int i = 0; i < bytes2.length; i++) {
        System.out.print(bytes2[i] & 0xff);
        System.out.print("\t");
    }
    System.out.println();

    //构建出来的dest自然不是原先的src
    String dest = new String(bytes2, "utf-8");
    System.out.println(dest);
  
}

src等于"你好啊"时:

9
9
228	189	160	229	165	189	229	149	138	
228	189	160	229	165	189	229	149	63	
你好??

src等于"一二三"时：

9
8
228	184	128	228	186	140	228	184	137	
228	184	63	186	140	228	184	63	
??????

import java.security.InvalidKeyException;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;

import javax.crypto.BadPaddingException;
import javax.crypto.Cipher;
import javax.crypto.IllegalBlockSizeException;
import javax.crypto.NoSuchPaddingException;
import javax.crypto.SecretKey;
import javax.crypto.spec.SecretKeySpec;

import com.sun.org.apache.xerces.internal.impl.dv.util.Base64;

public class Security {
 static {
  java.security.Security
    .addProvider(new com.sun.crypto.provider.SunJCE());
 }

 public static String encrypt(String strSrc, String encName)
   throws NoSuchAlgorithmException {
  MessageDigest md = null;
  String strDes = null;

  byte[] bt = strSrc.getBytes();
  if (encName == null || encName.equals("")) {
   encName = "MD5";
  }
  md = MessageDigest.getInstance(encName);
  md.update(bt);
  strDes = byte2hex(md.digest());
  return strDes;
 }

 // DES,DESede,Blowfish

 // keybyte为加密密钥，长度为24字节
 // src为被加密的数据缓冲区（源）
 // algorithm加密算法
 public static byte[] encryptMode(byte[] keybyte, byte[] src,
   String algorithm, String mode) throws NoSuchAlgorithmException,
   NoSuchPaddingException, InvalidKeyException,
   IllegalBlockSizeException, BadPaddingException {
  // 生成密钥
  SecretKey deskey = new SecretKeySpec(keybyte, algorithm);
  // 加密
  Cipher c1 = Cipher.getInstance(algorithm + mode);
  c1.init(Cipher.ENCRYPT_MODE, deskey);
  return c1.doFinal(src);
 }

 // keybyte为加密密钥，长度为24字节
 // src为加密后的缓冲区
 // algorithm加密算法
 public static byte[] decryptMode(byte[] keybyte, byte[] src,
   String algorithm, String mode) throws NoSuchAlgorithmException,
   NoSuchPaddingException, InvalidKeyException,
   IllegalBlockSizeException, BadPaddingException, Exception {
  // 生成密钥
  SecretKey deskey = new SecretKeySpec(keybyte, algorithm);
  // 解密
  Cipher c1 = Cipher.getInstance(algorithm + mode);
  c1.init(Cipher.DECRYPT_MODE, deskey);
  return c1.doFinal(src);
 }

 /** 将字节数组转换成16进制的字符串 */
 public static String byte2hex(byte[] b) {
  String hs = "";
  String stmp = "";
  for (int n = 0; n < b.length; n++) {
   stmp = (java.lang.Integer.toHexString(b[n] & 0xFF));
   if (stmp.length() == 1)
    hs = hs + "0" + stmp;
   else
    hs = hs + stmp;
  }
  return hs;
 }

 /** 将16进制的字符串转换成字节数组 */
 public static byte[] getBytesFromHex(String hexstr) {
  byte[] bytes = new byte[hexstr.length() / 2];
  if ((hexstr.length()) % 2 != 0) {
   return null;
  }
  for (int i = 0; i < hexstr.length() / 2; i++) {
   byte[] temp = new byte[2];
   temp[0] = (byte) hexstr.charAt(i * 2);
   temp[1] = (byte) hexstr.charAt(i * 2 + 1);
   bytes[i] = (byte) (Integer.parseInt(new String(temp), 16));
  }

  return bytes;
 }

 public static void main(String[] args) {
  try {
   // MD5是16位,SHA是20位（这是两种报文摘要的算法）
   String originalPwd = "an";
   MessageDigest messageDigest = MessageDigest.getInstance("MD5");
   // MessageDigest messageDigest=MessageDigest.getInstance("SHA-1");

   messageDigest.update(originalPwd.getBytes());
   // 得到的是个二进制byte数组，有可能某些byte是不可打印的字符。
   byte[] digest = messageDigest.digest();

   // 转换成Base64编码保存
   String digestedPwdString_base64 = new String(Base64.encode(digest));
   // System.out.println("digestedPwdString_base64:"
   // + digestedPwdString_base64);

   // 转换成16进制字符串保存
   String digestedPwdString_hex = byte2hex(digest);
   // System.out
   // .println("digestedPwdString_hex:" + digestedPwdString_hex);

   // System.out.println("encrypt:" + encrypt(originalPwd, "MD5"));

   //实际使用中，遇到了与C语言写的3DES加解密结果不一致的情况，经过调试，发现它使用的是16位的密码，在java中的密钥是24位，后8位不能自动补0而应该是前八位的内容，在使用模式ECB/NOPadding时，源串长度必须是8的整数倍，不足部分补0，所以会报告错误。看来，什么东西只掌握一个皮毛是不行的啊

   /** ********************************************************* */
   // 支技DES,DESede,Blowfish三种加密算法
   String algorithm = "DESede";
   String mode = "/ECB/NOPadding";
   // F3BBABC6759F93E81FD6ED730F646D55 116.31532
   // 24字节的密钥

   byte[] keybyte = new byte[24];
   String keystr = "18D41B04BFC6463918D41B04";
   System.arraycopy(keystr.getBytes(), 0, keybyte, 0, keystr
     .getBytes().length);
   String srcstr = "116.31532";
   byte[] srcbyte = srcstr.getBytes();

   int ileft = (srcbyte.length) % (8);
   if (ileft != 0) {
    byte[] temp = new byte[srcbyte.length + 8 - ileft];
    for (int i = 0; i < temp.length; i++) {
     if (i < srcbyte.length) {
      temp[i] = srcbyte[i];
     } else {
      temp[i] = (byte) (0);
     }
    }
    srcbyte = temp;
   }
   System.out.println("加密前的字符串的字节数组:0x" + byte2hex(srcbyte));
   byte[] encode = encryptMode(keybyte, srcbyte, algorithm, mode);
   System.out.println("加密后的字符串的字节数组:0x" + byte2hex(encode));
   byte[] decode = decryptMode(keybyte, encode, algorithm, mode);
   System.out.println("解密后的字符串:" + (new String(decode)).trim());
  } catch (Exception e) {
   e.printStackTrace();
  }
 }

}