自动补全autocomplete例子支持中文数据库_vlookup中文匹配不出来资源-CSDN文库

共6个文件

js：4个

css：1个

html：1个

自动补全

autocomplete

支持中文

4星 · 超过85%的资源需积分: 9 192 浏览量 2013-12-02 13: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

评论收藏

内容反馈