Jquery autocomplete.js輸入框聯想補全功能

Jquery autocomplete.js插件下載地址：http://files.cnblogs.com/files/jinzhiming/autocomplete.rar

有兩種用法，一種是直接使用頁面的數據，一種是輸入請求地址，請求后台返回數據

1.數據格式就是下方這種

    
    <link href="../autocomplete/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../lib/jQuery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../autocomplete/jquery.autocomplete.js"></script>

<input type="text" value="" id="searchInput" />

<script>


        var emails = [
            { name: "Peter Pan", to: "[e-mail]" },
            { name: "Molly", to: "[e-mail]" },
            { name: "Forneria Marconi", 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]" }
        ];
$(function(){

    $("#searchInput").autocomplete(emails, {
                    max: 5,    //列表里的條目數
                    minChars: 0,    //自動完成激活之前填入的最小字符
                    width: $("#searchInput").width()+1,     //提示的寬度，溢出隱藏
                    scrollHeight: 300,   //提示的高度，溢出顯示滾動條
                    matchContains: true,    //包含匹配，就是data參數里的數據，是否只要包含文本框里的數據就顯示
                    autoFill: false,    //自動填充
                    formatItem: function(row, i, max) {
                        return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
                    },
                    formatMatch: function(row, i, max) {
                        return row.name + row.to;
                    },
                    formatResult: function(row) {
                        return row.to;
                    }
                }).result(function(event, row, formatted) {
                    alert($("#searchInput").width());
                });
});

</script>

2.后台傳過來的數據格式也可以是上邊這種，但是需要重寫下parse方法：

[{"bankCode":"111","bankName":"中國工商銀行"},{"bankCode":"2","bankName":"中國銀行"}]

 

    $(function(){

        $("#inbankid").autocomplete('<%=request.getContextPath() %>/protected/accountAction.do?m=searchBankName', {
            max: 5,    //列表里的條目數
            minChars: 1,    //自動完成激活之前填入的最小字符
            width: $("#inbankid").width(),     //提示的寬度，溢出隱藏
            scrollHeight: 300,   //提示的高度，溢出顯示滾動條
            matchContains: true,    //包含匹配，就是data參數里的數據，是否只要包含文本框里的數據就顯示
            autoFill: false,    //自動填充
            dataType : "json",
            parse: function(data){
                var rows = [];
                var d = data;
                for(var i=0; i<d.length; i++){
                    rows[rows.length] = {
                        data:d[i],
                        value:d[i].bankName,
                        result:d[i].bankName
                    };
                }
                return rows;
            },
            formatItem: function(row, i, max) {
                return row.bankName + '[' + row.bankCode + ']';
            },
            formatMatch: function(row, i, max) {
                return  row.bankName;
            },
            formatResult: function(row) {
                return row.bankName;
            }
        }).result(function(event, row, formatted) {
            
        });
    });