Jquery autocomplete.js输入框联想补全功能

Jquery autocomplete.js插件下载地址：https://github.com/agarzola/jQueryAutocompletePlugin

有两种用法，一种是直接使用页面的数据，一种是输入请求地址，请求后台返回数据

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: "[email protected]" },
            { name: "Molly", to: "[email protected]" },
            { name: "Forneria Marconi", to: "[email protected]" },
            { name: "Master Sync", to: "[email protected]" },
            { name: "Dr. Tech de Log", to: "[email protected]" },
            { name: "Don Corleone", to: "[email protected]" },
            { name: "Mc Chick", to: "[email protected]" },
            { name: "Donnie Darko", to: "[email protected]" },
            { name: "Quake The Net", to: "[email protected]" },
            { name: "Dr. Write", to: "[email protected]" },
            { name: "GG Bond", to: "[email protected]" },
            { name: "Zhuzhu Xia", to: "[email protected]" }
        ];
$(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){
                    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) {
            
        });
    });

 

好文要顶 关注我 收藏该文

【漫步云端】
关注 - 7
粉丝 - 8

+加关注

0

0

转载于:https://www.cnblogs.com/michiko/p/11257039.html