1 看本文前,请先看http://www.jb51.net/article/24219.htm,上面需要对接的数据都是标准格式,所以不需要太麻烦,如:
var x = [
{ name: "Peter Pan", to: "peter@pan.de" },
{ name: "Molly", to: "molly@yahoo.com" },
{ name: "Forneria Marconi", to: "live@japan.jp" }
];
2 如果我们操作本地的数据,那么也很简单,只要按照标准格式传就行了
3 但是如果我们跟后台对接,而后台返回的数据很乱,如:
那么,我们就需要处理一下,可以配置autocomplete的parse项。
示例:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<title>test</title>
<link rel="stylesheet" href="skin/base2/css/jquery.autocomplete.css" />
<script type="text/javascript" src="skin/base2/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="skin/base2/js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="skin/base2/js/jquery.autocomplete.js"></script>
<style>
* {margin: 0; padding: 0;}
textarea {margin-top: 100px;}
</style>
</head>
<body>
<textarea></textarea>
</body>
<script>
;$(function() {
$('textarea').autocomplete('/servlet', {
parse: function(data) {
console.log('data=> '+ JSON.stringify(data));
var rows = [];
for(var i=0; i<data.list.length; i++){
rows[i] = {
data: data.list[i].question//data名称不能变
};
}
console.log('rows=> '+ JSON.stringify(rows));
return rows;
},
formatItem: function(row, i, max) {
console.log('row=> '+ JSON.stringify(row));
return i + '. ' + row ;
}
});
});
</script>
</html>
最后,有以下比较重要的情况,网上都没有讲到:
1 $('input').unautocomplete();//销毁插件实例
2 修改提示框方向(上、下)需要修改源码