jQuery AutoComplete 自动补全

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

daise...

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Demo For AutoComplete.js</title>
    <script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.8.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//ku.shouce.ren/libs/autoComplete/css/jquery.autocomplete.css">
    <script type="text/javascript" src="//ku.shouce.ren/libs/autoComplete/js/jquery.autocomplete.min.js"></script>
    <script src="//shouce.ren/static/demo/autoComplete/test.js"></script>
    <style type="text/css">
        body {
            margin: 0px;
            background: #f4f4f4;
            font-family: Helvetica Neue, Helvetica, Arial;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#down').AutoComplete({
                'data': ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
                'itemHeight': 20,
                'width': 280
            }).AutoComplete('show');

$('#up').AutoComplete({
                'data': ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
                'itemHeight': 20,
                'listDirection': 'up',
                'width': 280
            }).AutoComplete('show');

var teams = [{
                            'label': '江苏舜天队',
                            'value': '江苏舜天队',
                            'win': 14,
                            'tie': 9,
                            'lose': 3,
                            'score': 51
                        },{
                            'label': '广州恒大队',
                            'value': '广州恒大队',
                            'win': 15,
                            'tie': 6,
                            'lose': 5,
                            'score': 51
                        },{
                            'label': '广州富力队',
                            'value': '广州富力队',
                            'win': 13,
                            'tie': 2,
                            'lose': 11,
                            'score': 41
                        },{
                            'label': '北京国安队',
                            'value': '北京国安队',
                            'win': 12,
                            'tie': 5,
                            'lose': 9,
                            'score': 41
                        },{
                            'label': '贵州人和队',
                            'value': '贵州人和队',
                            'win': 10,
                            'tie': 7,
                            'lose': 9,
                            'score': 37
                        },{
                            'label': '天津泰达队',
                            'value': '天津泰达队',
                            'win': 9,
                            'tie': 8,
                            'lose': 9,
                            'score': 35
                        },{
                            'label': '长春亚泰队',
                            'value': '长春亚泰队',
                            'win': 9,
                            'tie': 8,
                            'lose': 9,
                            'score': 35
                        },{
                            'label': '上海申花队',
                            'value': '上海申花队',
                            'win': 7,
                            'tie': 13,
                            'lose': 6,
                            'score': 34
                        },{
                            'label': '大连阿尔滨队',
                            'value': '大连阿尔滨队',
                            'win': 8,
                            'tie': 10,
                            'lose': 8,
                            'score': 34
                        },{
                            'label': '山东鲁能队',
                            'value': '山东鲁能队',
                            'win': 7,
                            'tie': 10,
                            'lose': 9,
                            'score': 31
                        },{
                            'label': '大连实德队',
                            'value': '大连实德队',
                            'win': 7,
                            'tie': 10,
                            'lose': 9,
                            'score': 31
                        },{
                            'label': '青岛中能队',
                            'value': '青岛中能队',
                            'win': 8,
                            'tie': 6,
                            'lose': 12,
                            'score': 30
                        },{
                            'label': '辽宁宏运队',
                            'value': '辽宁宏运队',
                            'win': 6,
                            'tie': 11,
                            'lose': 9,
                            'score': 29
                        },{
                            'label': '杭州绿城队',
                            'value': '杭州绿城队',
                            'win': 7,
                            'tie': 8,
                            'lose': 11,
                            'score': 29
                        },{
                            'label': '上海申鑫队',
                            'value': '上海申鑫队',
                            'win': 5,
                            'tie': 11,
                            'lose': 10,
                            'score': 26
                        },{
                            'label': '河南建业队',
                            'value': '河南建业队',
                            'win': 7,
                            'tie': 4,
                            'lose': 15,
                            'score': 25
                        }];

$.each(teams, function(index, data){
                new Image().src = '//ku.shouce.ren/libs/autoComplete/img/2012中超/' + data['value'] + '.jpg'; // 预加载图片
                data['image'] = '//ku.shouce.ren/libs/autoComplete/img/2012中超/' + data['value'] + '.jpg';
            });

$('#custom').AutoComplete({
                'data': teams,
                'width':280,
                'listStyle': 'custom',
                'maxHeight': 480,
                'createItemHandler': function(index, data){
                    var div = $("<div></div>")
                    var cell1 = $("<div style='display:table-cell;vertical-align:top;'></div>").appendTo(div);
                    var cell1_1 = $("<img style='width:32px;height:32px;'></img>").attr('src', data.image).appendTo(cell1);
                    var cell2 = $("<div style='display:table-cell;vertical-align:top;'></div>").appendTo(div);
                    var cell2_1 = $("<div></div>").append(data.label).appendTo(cell2);
                    var cell2_2 = $("<div style='vertical-align:top;'></div>")
                                .append("<div style='display:table-cell;width:40px;'>胜:"+data.win+"</span>")
                                .append("<div style='display:table-cell;width:40px;'>平:"+data.tie+"</span>")
                                .append("<div style='display:table-cell;width:40px;'>负:"+data.lose+"</span>")
                                .append("<div style='display:table-cell;width:40px;'>积:"+data.score+"</span>")
                                .appendTo(cell2);
                    return div;
                }
            }).AutoComplete('show');

alltest.testIconList('#iconlist');
            $('#iconlist').AutoComplete('show');

});
    </script>

</head>
<body>
    <div style="background-color:black;height:40px;margin-bottom:10px;">
		<div style="width:1000px;margin:auto;height:100%;color:white;"><span style="font-size:20px;line-height:40px;">jQuery.AutoComplete 自动补全插件</span></div>
    </div>
    <div style="width:1000px;margin:auto;">
        <div style="display:table-cell;">
            <div style="height:503px;width:330px;">
                <input type="text" id="down" value="e"></input><span style="font-weight:bold;font-size:13px;">补全列表在下方</span>
            </div>
            <div>
                <input type="text" id="up" value="e"></input><span style="font-weight:bold;font-size:13px;">补全列表在上方</span>
            </div>
	</div>
        <div style="display:table-cell;width:330px;">
            <input type="text" id="iconlist" value="c"></input><span style="font-weight:bold;font-size:13px;">图标文本样式</span>
        </div>
        <div style="display:table-cell;width:330px;">
            <input type="text" id="custom" value="队"></input><span style="font-weight:bold;font-size:13px;">自定义样式</span>
        </div>
    </div>
</body></html>

​x
 
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>Demo For AutoComplete.js</title>
    <script type="text/javascript" src="http://ku.shouce.ren/libs/jquery/1/jquery1.8.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="//ku.shouce.ren/libs/autoComplete/css/jquery.autocomplete.css">
    <script type="text/javascript" src="//ku.shouce.ren/libs/autoComplete/js/jquery.autocomplete.min.js"></script>
    <script src="//shouce.ren/static/demo/autoComplete/test.js"></script>
    <style type="text/css">
        body {
            margin: 0px;
            background: #f4f4f4;
            font-family: Helvetica Neue, Helvetica, Arial;
        }

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

jQuery AutoComplete 自动补全

分类

jQuery实例

描述

jQuery.AutoComplete是一个基于jQuery的自动补全插件。借助于jQuery优秀的跨浏览器特性，可以兼容Chrome/IE/Firefox/Opera/Safari等多种浏览器。