zoukankan      html  css  js  c++  java
  • 文本框输入时,是实现自动提示(像百度、google一样)

    只要有三个文件:

    一个js插件autocomplete.js和autocomplete.css两个文件,这是jquery官方网站提供的插件;

    他们的下载地址:http://jqueryui.com/demos/autocomplete/ 

    一个是一般处理程序 ;

    一个是apsx页面,看下面的代码吧;

    前台:

    <script type="text/javascript">
            $(document).ready(function() {
                ShowUserList($("#TextBox1"), "LoginTest.ashx");
       //TextBox1为文本框的ID,loginTest.ashx为请求的一般处理程序。
                function ShowUserList(obj, url) {
                    $.getJSON(
                            url,
                            function(msg) {
                    var names = new Array();
                                msg = msg.Table;
                                var names = new Array();
                                for (var i = 0; i < msg.length; i++) {
                                    names.push(msg[i].loginName);
                                }
                                obj.focus().autocomplete(names);
                            }
                        );
                }
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            用户名:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="登录" />
        </div>
        </form>
    </body>

    后台是一般处理程序:

     public class LoginTest : IHttpHandler
        {

            string str;
            public void ProcessRequest(HttpContext context)
            {
                getUserName();
                
                context.Response.Write(str);
            }

            public bool IsReusable
            {
                get
                {
                    return false;
                }
            }
            private void  getUserName() 
            {
                DataSet ds = SqlHelper.BuildDataSet("select * from login", CommandType.Text);
                str = ConvertJson.ToJson(ds);
            }
        }

    运行结果:
     


  • 相关阅读:
    CSS Sprite笔记
    前端分页页码静态部分制作
    有趣的网页小部件笔记
    Lintcode 85. 在二叉查找树中插入节点
    Lintcode 166. 主元素
    网页失去焦点标题变化效果
    Lintcode 166. 链表倒数第n个节点
    Lintcode 157. 判断字符串是否没有重复字符
    Lintcode 175. 翻转二叉树
    Lintcode 372. O(1)时间复杂度删除链表节点
  • 原文地址:https://www.cnblogs.com/wggWeb/p/2427030.html
Copyright © 2011-2022 走看看