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

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

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

3.引入JS文件

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

4.添加Web窗体代码

         <div>
             <!-- Tabs -->
             <h2 class="demoHeaders">Tabs</h2>
             <div id="tabs">
                 <ul>
                     <li><a href="#tabs-1">自动补全-数组</a></li>
                     <li><a href="#tabs-2">自动补全-Json</a></li>
                 </ul>
                 <div id="tabs-1">
                     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                 </div>
                 <div id="tabs-2">
                     <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                 </div>
             </div>
         </div>

5.添加JqueryUI初始化代码

         $(function () {
             $("#tabs").tabs();
             var availableTags = ["ActionScript", "测试", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
             $("#TextBox1").autocomplete({ source: availableTags });
             $("#TextBox2").autocomplete({
                 minLength: 1, source: function (request, response) {
                     $.ajax({
                         type: "POST",
                         url: "Handler1.ashx?keyword=" + request.term,
                         contentType: "application/json; charset=utf-8",
                         dataType: "json",
                         success: function (data) {
                             response($.map(data, function (item) {
                                 return { value: item };
                             }));
                         },
                         error: function () {
                             alert("ajax请求失败");
                         }
                     });
                 }
             })
         });

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

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

7.运行效果

8.更多参考资料
http://jqueryui.com/autocomplete/

练习代码下载地址 http://pan.baidu.com/s/1nt9akFf