自动补全autocomplete例子支持中文数据库资源-CSDN文库

共6个文件

js：4个

css：1个

html：1个

自动补全

autocomplete

支持中文

4星 · 超过85%的资源需积分: 9 2 浏览量 2013-12-02 05:55:44 上传评论收藏 42KB RAR 举报

在IT领域，自动补全（Autocomplete）是一种常见的功能，广泛应用于各种文本输入场景，如搜索引擎、编程IDE、操作系统命令行等。它极大地提高了用户输入效率，减少了误输入的可能性。本示例着重介绍如何实现一个支持中文的自动补全功能，并结合数据库存储和检索数据。自动补全的基本原理是基于用户输入的部分文字，系统会预测并显示可能的完整词汇或短语供用户选择。对于支持中文，我们需要处理的是汉字字符集，这与英文字符处理有所不同。在C#或PHP中，可以使用Unicode编码来处理中文字符，确保程序能够正确识别和处理中文。在C#中，可以利用`System.Windows.Forms.AutoCompleteSource`类来实现文本框的自动补全功能。你需要创建一个包含可能的补全项的列表，然后将这个列表绑定到文本框的`AutoCompleteCustomSource`属性。当用户输入时，系统会自动匹配列表中的项。 ```csharp List<string> autoCompleteList = new List<string>(); // 添加中文词汇到列表 autoCompleteList.Add("自动化"); autoCompleteList.Add("自动完成"); // 绑定到文本框 textBox1.AutoCompleteMode = AutoCompleteMode.SuggestAppend; textBox1.AutoCompleteSource = AutoCompleteSource.CustomSource; textBox1.AutoCompleteCustomSource = new AutoCompleteStringCollection(); foreach (string item in autoCompleteList) { textBox1.AutoCompleteCustomSource.Add(item); } ``` 在PHP中，虽然没有内置的自动补全功能，但可以通过JavaScript库（如jQuery UI的Autocomplete插件）在前端实现，后端PHP负责提供补全建议的数据。例如，你可以创建一个API接口，接收用户的输入，查询数据库中相关的中文词汇，然后返回结果。 ```php <?php // 假设已经连接到数据库 $query = "SELECT keyword FROM autocomplete WHERE keyword LIKE CONCAT('%', :input, '%')"; $stmt = $pdo->prepare($query); $stmt->bindParam(':input', $_GET['input'], PDO::PARAM_STR); $stmt->execute(); $results = $stmt->fetchAll(PDO::FETCH_COLUMN); // 将结果转换为JSON格式 echo json_encode($results); ?> ``` 数据库在这个过程中扮演了关键角色，用于存储大量的候选词汇。可以创建一个专门的`autocomplete`表，包含`keyword`字段来存储关键词。当用户输入时，通过模糊匹配（如`LIKE`操作符）来查找与输入相匹配的词汇。在实现自动补全时，还需要考虑性能优化，比如使用索引加速查询，或者使用缓存减少对数据库的访问。此外，如果数据量非常大，还可以采用Trie树或其他数据结构来提高搜索效率。实现一个支持中文的自动补全功能涉及多方面的技术，包括客户端的UI交互、服务器端的数据处理以及数据库查询优化。通过结合C#或PHP的后端开发和前端JavaScript库，可以构建出高效且用户体验良好的自动补全系统。

展开

资源推荐

资源详情

资源评论

收起资源包目录

autocomplete 例子.rar （6个子文件）

自动补全

test.js 7KB

jquery-1.7.1.min.js 92KB

jquery.autocomplete.min.js 8KB

jquery.autocomplete.css 2KB

jquery.autocomplete.js 16KB

新建文本文档.html 9KB

      
<!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="jquery-1.7.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css"></link>
    <script type="text/javascript" src="jquery.autocomplete.min.js"></script>
    <script src="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 = '../demo/image/2012中超/' + data['value'] + '.jpg'; // 预加载图片
                data['image'] = '../demo/image/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;he