Jquery的big自动补全插件，Ajax后台取数据的用法 插件bigAutocomplete

      这些天，自己动手练习servlet项目BBS系统（运行环境win7+MySql+Myeclipse6.5）。
       各个功能都是自己想着法子往上面添加，于是，在用户登录界面，异想天开的想加一个搜索引擎（百度、搜狗等）那样的自动补全功能，随着客户自己输入，自动下拉弹出相关的内容供客户选择，当然，下拉的东西都是从后台获取的。
       在网上搜索，相关的插件还真有不错的，比如，Big亮的自动补全插件（下面有big亮的博客地址），Demo简单易懂，实现的效果太完美了，兴奋之余就决定把这个功能嵌套到自己的登陆页面。
       动手做了起来，引入css、js等，按照文档中的注释一步步琢磨，可是后台的数据无论如何都无法传到前台，ajax的回调函数死活不执行，但往后台传参数等都是正常的（直接引入的插件无法传中文，后面会解释），ajax倒是能调动后台的程序执行。

原因先不分析了，先看看我是怎么调用的吧！

jsp中使用Jquery调用big插件的写法：
$("#UserName").bigAutocomplete({url:"<%=path %>/selectnames"});
很简单吧？url后面直接就是调用servlet。<%=path %>这个东西不理解，那就自己去充电吧！（PS：这是项目根路径。）

后台我就不贴了，很简单，无外乎就是接受ajax提交过去的关键字，然后后台模糊查询，返回给回调函数json等；

现在着重说一下jquery.bigautocomplete.js，这个文件里面的注释很明了，多看几遍就能发现关键所在，如果想调用后台，肯定是要走ajax异步的方式，于是就能找到$.post(){},这里面的相关内容的了解，几乎就解决了问题的一大半了，剩下的就是小问题了。
不过，我把这部分的内容作了更换，便于实现中文的传输，更换前后的内容如下；
更换前，在jquery.bigautocomplete.js文件的第161行可以找到：
$.post(url,{keyword:keyword_},function(result){ makeContAndShow(result.data)
},"json")

这段代码需要结合上下文看，url,就是请求后台的url;keyword,就是每次输入的关键字，回调函数，还有最重要的--json。
这段代码被我替换掉了，替换后的代码如下：
$.ajax({
         type: "POST",
         contentType: "application/x-www-form-urlencoded; charset=utf-8",
         url: url,
   data:{keyword:keyword_}, dataType:"json", success:function(result){    makeContAndShow(result.data)
      }
   })
更换代码最主要是可以添加一个属性contentType，变换传输关键字的编码方式。

除此之外，这个jquery插件还有一个头疼的地方，返回的数据格式务必是json格式的，稍微有点差错前面的js回调函数就无法执行，我使用的是java语言，后台servlet的doPost方法内要求有编码方式，下面我贴出来：
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
resp.setCharacterEncoding("UTF-8");
String key = req.getParameter("keyword");
PrintWriter out = resp.getWriter();
StringBuffer data = new StringBuffer();
String usernames = ServicesFactory.getUser_services().get_usersname(key);
String []name = usernames.split("#");
data.append("{").append("data").append(":").append("[");
for (int i = 0; i < name.length; i++)
{
data.append("{").append('"').append("title").append('"').append(':').append('"').append(name[i]).append('"').append("},");
}
JSONObject jb = JSONObject.fromObject(data.substring(0,data.length()-1)+"]}");
out.print(jb);
out.flush();
}

至于java的其他配置我就不赘述了！

效果图不会直接贴图片，看看附件吧，应该好理解，一个是后台数据库的图片，页面效果就是代码实现后前台的效果。

希望大家多多指点，多多交流。

big亮的博客地址：http://liu400liu.iteye.com/blog/1611032