练习笔记: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