jQuery plugin: Autocomplete的简单使用

我们在做web程序的时候,经常会使用到自动补全功能,可以给用户很好的体验.jQuery plugin: Autocomplete就是一个很好的插件.网上有很多相关的例子,但是这些例子都有一个问题,就是所有的数据源全是本地的数据源,就是直接写在代码里面的.如下面:

<script type="text/javascript">
$(function(){
var emails = [
{ name: "Peter", to: "peter@pan.de" },
{ name: "Molly", to: "molly@yahoo.com" },
{ name: "Forneria", to: "live@japan.jp" },
{ name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
{ name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
{ name: "Don Corleone", to: "don@vegas.com" },
{ name: "Mc Chick", to: "info@donalds.org" },
{ name: "Donnie Darko", to: "dd@timeshift.info" },
{ name: "Quake The Net", to: "webmaster@quakenet.org" },
{ name: "Dr. Write", to: "write@writable.com" },
{ name: "GG Bond", to: "Bond@qq.com" },
{ name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }
];

$("#autocomplete").autocomplete(emails,{
minChars: 0,//自动完成激活之前填入的最小字符
max:12,//列表条目数
width: 400,//提示的宽度
scrollHeight: 300,//提示的高度
matchContains: true,//是否只要包含文本框里的就可以
autoFill:false,//自动填充
formatItem: function(data, i, max) {//格式化列表中的条目 row:条目对象,i:当前条目数,max:总条目数
return i + '/' + max + ':"' + data.name + '"[' + data.to + ']';
},
formatMatch: function(data, i, max) {//配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据
return data.name + data.to;
},
formatResult: function(data) {//定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据
return data.to;
}
}).result(function(event,data,formatted){
alert(data.to);
});
});
</script>

这样的例子,很好,说明也很详细,可是有一个问题,我们在程序中都是从后台调用数据来处理,根本就不可能直接先把数据写到上面啊.有的朋友会说了,你直接把

$("#autocomplete").autocomplete(emails, 这里的emails换成"../autotest.aspx"这样就是可以了吗.这样不就直接读取后台的代码了吗.可是你写一下试试,你会发现一个问题.就是读出来的明明是json数据,可是程序根本就不运行.而且你在<pre name="code" class="javascript">formatItem里面加alert(data)你会把后台传的数据给打出来,也没有问题.你把这个数据,写成本地的数据,就可以正常完成了.这是为什么呢.看了一下源码,才发现,原来它只认回车和"|"
<pre name="code" class="javascript">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;
};

这个就有点坑爹了,不过做为一个开源的代码,他不可能这么弱啊.上官上查了一下,找到了方法,官方给了一个简单的例子.如下:

$(function() {
function format(mail) {
return mail.name + " <" + mail.to + ">";
}
$("#email").autocomplete('emails.php', {
multiple: true,
dataType: "json",
parse: function(data) {
return $.map(data, function(row) {
return {
data: row,
value: row.name,
result: row.name + " <" + row.to + ">"
}
});
},
formatItem: function(item) {
return format(item);
}
}).result(function(e, item) {
$("#content").append("<p>selected " + format(item) + "</p>");
});
});

就是让你重写parse方法, 当然了,你要把dataType:"json"写上,这样就OK了.下面是我的比较全的代码,我放上来

$("#txtSearchCommunityName").autocomplete("../ajaxPage/CommunityInfo.ashx?flag=2&cityID=<%=Session["AreaID"].ToString()%>",
{

minChars: 0,     //最小字符
matchCase: false,//不区分大小写
autoFill: false,
dataType: "json", //字符类型,默认为text
max: 10,          //下拉补全的行数
//重写parse方法,不然从远程接过来的json值,是不认的,因为它只是根据回车和"|"进行拆分
parse: function(data) {
return $.map(data, function(row) {
return {
data: row,
value: row.CommunityName,
result: row.CommunityName + " <" + row.DetailAddress + ">"
}
});
},
//此处显示的是下拉列表中出现的值,此处的值是我们自己构造出来的,必须与formatMatch配套使用,如果不想加formatMatch哪么里的值,就必须是单一的值,就是被注解的部分
formatItem: function (row, i, max) {
//alert(row);
//return row.CommunityName;
return "[" + row.CommunityName + "]" + row.DetailAddress;

},
//此处是告诉程序,在formatItem中显示的我们自己构造的值,里面包含是哪些原始数据,上面用到哪些,这里就写哪里
formatMatch: function(row, i, max) {
return row.CommunityName + row.DetailAddress;
},
//此处是当我们点选下拉数据时,什么样的信息显示在文本框里
formatResult: function(row) {
return row.CommunityName;
}

});