zoukankan html css js c++ java

[Jquery] Jquery AutoComplete的使用方法实例

jQuery的Autocomplete（自动完成、自动填充）插件

jquery-autocomplete配置：

首先是一个最简单的Autocomplete（自动完成）代码片段：

1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3     <title>AutoComplate</title>
4     <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
5     <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
6     <link rel="Stylesheet" href="/js/jquery.autocomplete.css" />
7     <script type="text/javascript">
8         $(function() {
9             var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
10
11             $('#keyword').autocomplete(data).result(function(event, data, formatted) {
12                 alert(data);
13             });
14         });
15     </script>
16 </head>
17 <body>
18     <form id="form1" runat="server">
19     <div>
20         <input id="keyword" />
21         <input id="getValue" value="GetValue" type="button" />
22     </div>
23     </form>
24 </body>
25 </html>

result方法是jQuery Autocomplete插件里的重要方法，它在用户在选定了某个条目时触发。data参数为选中的数据。

一个稍微复杂的例子，可以自定义提示列表:

1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3     <title>自定义提示</title>
4     <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
5     <script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>
6     <link rel="Stylesheet" href="/js/jquery.autocomplete.css" />
7     <script type="text/javascript">
8         var emails = [
9             { name: "Peter Pan", to: "peter@pan.de" },
10             { name: "Molly", to: "molly@yahoo.com" },
11             { name: "Forneria Marconi", to: "live@japan.jp" },
12             { name: "Master <em>Sync</em>", to: "205bw@samsung.com" },
13             { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },
14             { name: "Don Corleone", to: "don@vegas.com" },
15             { name: "Mc Chick", to: "info@donalds.org" },
16             { name: "Donnie Darko", to: "dd@timeshift.info" },
17             { name: "Quake The Net", to: "webmaster@quakenet.org" },
18             { name: "Dr. Write", to: "write@writable.com" },
19             { name: "GG Bond", to: "Bond@qq.com" },
20             { name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }
21         ];
22
23             $(function() {
24                 $('#keyword').autocomplete(emails, {
25                     max: 12,    //列表里的条目数
26                     minChars: 0,    //自动完成激活之前填入的最小字符
27                     400,     //提示的宽度，溢出隐藏
28                     scrollHeight: 300,   //提示的高度，溢出显示滚动条
29                     matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
30                     autoFill: false,    //自动填充
31                     formatItem: function(row, i, max) {
32                         return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';
33                     },
34                     formatMatch: function(row, i, max) {
35                         return row.name + row.to;
36                     },
37                     formatResult: function(row) {
38                         return row.to;
39                     }
40                 }).result(function(event, row, formatted) {
41                     alert(row.to);
42                 });
43             });
44     </script>
45 </head>
46 <body>
47     <form id="form1" runat="server">
48     <div>
49         <input id="keyword" />
50         <input id="getValue" value="GetValue" type="button" />
51     </div>
52     </form>
53 </body>
54 </html>

formatItem、formatMatch、formatResult是自定提示信息的关键。

formatItem作用在于可以格式化列表中的条目，比如我们加了“I”，让列表里的字显示出了斜体。

formatMatch是配合formatItem使用，作用在于，由于使用了formatItem，所以条目中的内容有所改变，而我们要匹配的是原始的数据，所以用formatMatch做一个调整，使之匹配原始数据，

formatResult是定义最终返回的数据，比如我们还是要返回原始数据，而不是formatItem过的数据。

下载地址：jquery.autocomplete示例代码.rar

----------------------------------------------------------------------------------------------------------------

其他：

MVC下场景应用

后台代码：

//类对象

public class EmailObj   {       public string name { get; set; }       public string to { get; set; }   }

//action方法：

public ActionResult get(string q)       {           var emails = new List<EmailObj>(){               new EmailObj(){ name = "Peter Pan", to= "peter@pan.de" },              new EmailObj(){ name= "Molly", to= "molly@yahoo.com" },              new EmailObj(){ name= "Forneria Marconi", to= "live@japan.jp" },              new EmailObj(){ name= "Master Sync", to= "205bw@samsung.com" },              new EmailObj(){ name= "Dr. Tech de Log", to= "g15@logitech.com" },              new EmailObj(){ name= "Don Corleone", to= "don@vegas.com" },              new EmailObj(){ name= "Mc Chick", to= "info@donalds.org" },              new EmailObj(){ name= "Donnie Darko", to= "dd@timeshift.info" },              new EmailObj(){ name= "Quake The Net", to= "webmaster@quakenet.org" },              new EmailObj(){ name= "Dr. Write", to= "write@writable.com" },              new EmailObj(){ name= "GG Bond", to= "Bond@qq.com" },              new EmailObj(){ name= "Zhuzhu Xia", to= "zhuzhu@qq.com" }          };           emails = emails.Where(c => c.to.ToLower().Contains(q.ToLower().TrimEnd())).ToList();           var res = JsonConvert.SerializeObject(emails);           res = res.Replace("},", "}
").TrimStart('[').TrimEnd(']');           return Json(res, JsonRequestBehavior.AllowGet);       }

//前台js代码：

@{     Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>     <script src="~/Scripts/autocomplete/jquery.js"></script>     <link href="~/Scripts/autocomplete/jquery.autocomplete.css" rel="stylesheet" />     <script src="~/Scripts/autocomplete/jquery.autocomplete.js"></script>     <meta name="viewport" content="width=device-width" />     <title>Index</title>     <script type="text/javascript">         var emails = [            { name: "Peter Pan", to: "peter@pan.de" },            { name: "Molly", to: "molly@yahoo.com" },            { name: "Forneria Marconi", to: "live@japan.jp" },            { name: "Master <em>Sync</em>", to: "205bw@samsung.com" },            { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },            { name: "Don Corleone", to: "don@vegas.com" },            { name: "Mc Chick", to: "info@donalds.org" },            { name: "Donnie Darko", to: "dd@timeshift.info" },            { name: "Quake The Net", to: "webmaster@quakenet.org" },            { name: "Dr. Write", to: "write@writable.com" },            { name: "GG Bond", to: "Bond@qq.com" },            { name: "Zhuzhu Xia", to: "zhuzhu@qq.com" }         ];         $(function () {             $('#keyword').autocomplete("/A/get", {                 dataType: "json",                 max: 12,    //列表里的条目数                 minChars: 0,    //自动完成激活之前填入的最小字符                  400,     //提示的宽度，溢出隐藏                 scrollHeight: 300,   //提示的高度，溢出显示滚动条                 matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示                 autoFill: false,    //自动填充                 cacheLength: 0,                 formatItem: function (row, i, max) {                     row = JSON.parse(row);                     return i + '/' + max + ':"' + row.name + '"[' + row.to + ']';                 },                 formatMatch: function (row, i, max) {                     row = JSON.parse(row);                     return row.name + row.to;                 },                 formatResult: function (row) {                     row = JSON.parse(row);                     return row.to;                 }             }).result(function (event, row, formatted) {                     row = JSON.parse(row);

                 alert(row.to);             });         });     </script>
</head>
<body>     <div>         inputs:         <input id="keyword" />     </div>       </body>
</html>

下载地址：Code_AutoComplete.rar

查看全文

相关阅读:
SAP PI 如何实现消息定义查询
 EWM与ERP交互程序
 ITS Mobile Template interpretation failed. Template does not exist
SAP Material Flow System (MFS) 物料流系统简介
 SAP EWM Table list
EWM RF 屏幕增强
 SAP EWM TCODE list
SAP扩展仓库管理（SAPEWM）在线研讨会笔记
 ERP与EWM集成配置ERP端组织架构（二）
EWM RF（Radio Frequency）简介

原文地址：https://www.cnblogs.com/jx270/p/4516896.html