杉林的HelloWord 2013-10-01
jquery autocomplete插件,地址:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/
在具体使用的时候,需要引入基本的js文件和css文件,图片文件不引入,不会影响使用:
<link rel="stylesheet" type="text/css" href="jquery.autocomplete.css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type='text/javascript' src='jquery.autocomplete.js'></script>
特别说明:该插件是根据jquery1.2.6编写的,当你引入的是比较高级的jquery文件的时候,需要在autocomplete.js中加入关于浏览器类型的判断,在高级版本的jquery文件中,已经舍弃的这部分内容:
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
}
ajax请求处理关键代码:(后台返回的不是json格式的数据,而且一行一行的字符串,以“|”分割)
if(someList!= null && someList.size() > 0){
PrintWriter writer = response.getWriter();
for(String[] strs:someList){
writer.println(strs[0] + "|" + strs[1]);
}
}
ajax返回字符串后,autocomplete如此处理:
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;
};