jquery插件jquery.autocomplete.js的中文化、json化改造

项目需要，需要一个autocomplete插件，网上一搜，下载了个号称最好的jquery.autocomplete.js插件来用，插件自带的范例倒是挺好用，尝试在范例中加入中文，firefox中就不行了，依照外事不决问google的惯例，一搜，嗯，找到

$input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) {

这一行，在函数的最末尾

}).bind("unautocomplete", function() {select.unbind();$input.unbind();$(input.form).unbind(".autocomplete");})

处，插入代码，结果为：

}).bind("unautocomplete", function() {select.unbind();$input.unbind();$(input.form).unbind(".autocomplete");}).bind("input", function() {// @hack by liqt:support for inputing chinese characters in firefoxonChange(0, true);});

该代码作用是响应firefox中的input事件，这样，使用输入法输入中文就可以正常响应了。

好了，似乎大功告成，测试一把，在spring中的某个控制器写个函数：

@RequestMapping("/match_words.json")public @ResponseBody List<String> matchWords(String q) { String[] words = new String[]{ "中国", "中华人民共和国", "美国", "英国", "加拿大", "小日本" };List<String> ret = new ArrayList<String>();for(String v : words)if(v.indexOf(q) != -1)ret.add(v);return ret;}

满怀希望，浏览器打开，测试。。。报javascript某个split函数错误，无语了。没辙，看代码吧，原来是autocomplete插件默认处理返回内容是通过换行符分割每项内容，“|”分割每项内容中的每个字段。

虽然可以通过调用autocomplete函数时指定处理返回内容的回调函数，但这都啥年代了，不支持json格式的返回内容，那都是原始社会出来的，方便起见，还是改源码吧，开源的东西就有这个好处，看不惯，改源码，看得惯，偷源码。

言归正传，找到 function request(term, success, failure) 函数定义处，把$.ajax函数调用的dataType改为"json"，找到function parse(data)函数定义处，把原来这句var rows = data.split("/n"); 改为 var rows = data;，改完的代码片段效果如下：

function request(term, success, failure) {if (!options.matchCase)term = term.toLowerCase();var data = cache.load(term);// recieve the cached dataif (data && data.length) {success(term, data);// if an AJAX url has been supplied, try loading the data now} else if( (typeof options.url == "string") && (options.url.length > 0) ){var extraParams = {timestamp: +new Date()};$.each(options.extraParams, function(key, param) {extraParams[key] = typeof param == "function" ? param() : param;});$.ajax({// try to leverage ajaxQueue plugin to abort previous requestsmode: "abort",// limit abortion to this inputport: "autocomplete" + input.name,dataType: "json",url: options.url,data: $.extend({q: lastWord(term),limit: options.max}, extraParams),success: function(data) {var parsed = options.parse && options.parse(data) || parse(data);cache.add(term, parsed);success(term, parsed);}});} else {// if we have a failure, we need to empty the list -- this prevents the the [TAB] key from selecting the last successful matchselect.emptyList();failure(term);}};function parse(data) {var parsed = [];var rows = data;//.split("/n");for (var i=0; i < rows.length; i++) {var row = $.trim(rows[i]);if (row) {row = row.split("|");parsed[parsed.length] = {data: row,value: row[0],result: options.formatResult && options.formatResult(row, row[0]) || row[0]};}}return parsed;};

哈哈，这回再测试，firefox、IE6（我机器只有这两种浏览器）均没问题，打完收工！