练习笔记:net,JqueryUI实现自动补全功能

浏览数：28 / 时间：2015年06月09日

1.首先建立个空的Web项目

2.将下载好的JqueryUI文件保存到JS文件加下

3.引入JS文件

1     <link href="JS/css/ui-lightness/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
2     <script src="JS/js/jquery-1.10.2.js"></script>
3     <script src="JS/js/jquery-ui-1.10.4.custom.js"></script>

4.添加Web窗体代码

 1         <div>
 2             <!-- Tabs -->
 3             <h2 class="demoHeaders">Tabs</h2>
 4             <div id="tabs">
 5                 <ul>
 6                     <li><a href="#tabs-1">自动补全-数组</a></li>
 7                     <li><a href="#tabs-2">自动补全-Json</a></li>
 8                 </ul>
 9                 <div id="tabs-1">
10                     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
11                 </div>
12                 <div id="tabs-2">
13                     <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
14                 </div>
15             </div>
16         </div>

5.添加JqueryUI初始化代码

 1         $(function () {
 2             $("#tabs").tabs();
 3             var availableTags = ["ActionScript", "测试", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
 4             $("#TextBox1").autocomplete({ source: availableTags });
 5             $("#TextBox2").autocomplete({
 6                 minLength: 1, source: function (request, response) {
 7                     $.ajax({
 8                         type: "POST",
 9                         url: "Handler1.ashx?keyword=" + request.term,
10                         contentType: "application/json; charset=utf-8",
11                         dataType: "json",
12                         success: function (data) {
13                             response($.map(data, function (item) {
14                                 return { value: item };
15                             }));
16                         },
17                         error: function () {
18                             alert("ajax请求失败");
19                         }
20                     });
21                 }
22             })
23         });

6.创建Handler1.ashx，添加代码

 1             context.Response.ContentType = "text/plain";
 2             string keyword = context.Request.QueryString["keyword"];
 3             if (keyword != null)
 4             {
 5                 JavaScriptSerializer serializer = new JavaScriptSerializer(); // 通过JavaScriptSerializer对象的Serialize序列化为["value1","value2",...]的字符串   
 6                 //这里应该去查询数据库，懒得写了
 7                 List<string> ss=new List<string> ();
 8                 ss.Add("adafdsa");
 9                 ss.Add("dafsdf");
10                 ss.Add("dfdsfsd");
11                 string jsonString = serializer.Serialize(ss);
12                 context.Response.Write(jsonString); // 返回客户端json格式数据  
13             }