jQuery plugin: Autocomplete的简单使用

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

<script type="text/javascript">
    $(function(){
        var emails = [
            { name: "Peter", to: "[e-mail]" },
            { name: "Molly", to: "[e-mail]" },
            { name: "Forneria", to: "[e-mail]" },
            { name: "Master <em>Sync</em>", to: "[e-mail]" },
            { name: "Dr. <strong>Tech</strong> de Log", to: "[e-mail]" },
            { name: "Don Corleone", to: "[e-mail]" },
            { name: "Mc Chick", to: "[e-mail]" },
            { name: "Donnie Darko", to: "[e-mail]" },
            { name: "Quake The Net", to: "[e-mail]" },
            { name: "Dr. Write", to: "[e-mail]" },
            { name: "GG Bond", to: "[e-mail]" },
            { name: "Zhuzhu Xia", to: "[e-mail]" }
        ];

        $("#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;
                    }
                   
                });