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 firefox onChange(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 data if (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 requests mode: "abort", // limit abortion to this input port: "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 match select.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（我机器只有这两种浏览器）均没问题，打完收工！