jQuery.AutoComplete 自动补全基本实例

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!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="https://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="https://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