• jquery.AutoComplete 仿百度文本框感应


    前台代码:

     <head runat="server">

        <title>AutoComplete</title>
        
    <script src="js/jquery-1.3.2.js" type="text/javascript"></script>
        
    <script src="js/jquery.autocomplete.js" type="text/javascript"></script>
        
    <script src="js/localdata.js" type="text/javascript"></script>
        
    <link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
        
    <link href="css/main.css" rel="stylesheet" type="text/css" />
        
    <link href="css/thickbox.css" rel="stylesheet" type="text/css" />

        
    <script type="text/javascript">
            $().ready(
    function () {
                
    //example
                $("#autocom").autocomplete("data.aspx", {
                    minChars: 
    1,
                    max: 
    50,
                     
    200,
                    scrollHeight:
    50,//卷轴高度
                    scroll: false,
                    scrollHeight: 
    100,
                    
    //autoFill: true, //当鼠标经过某项时,自动填充文本框
                    mustMatch: false//如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false 
                    //matchContains: true, //决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false 
                    extraParams: { bar: 4 }, //传参

                    
    //需要把data转换成json数据格式
                    parse: function (data) {
                        
    return $.map(eval(data), function (row) {
                            
    return {
                                data: row,
                                value: row.name,
                                
    //result: row.name + " <" + row.to + ">"
                                result:row.name
                            }
                        });
                    },
                    formatItem: 
    function (data, i, total) {
                        
    return data.name + data.to
                    },
                    formatMatch: 
    function (data, i, total) {
                        
    return data.name;
                    },
                    formatResult: 
    function (data, value) {
                        
    return data.name;
                    }
                }).result(
    function (event, data, formatted) { //回调
                    // alert(data.to);
                    $("#content").html(data.to);
                });
            })
        
    </script>
    </head>
    <body>
        
    <form id="form1" runat="server">
        
    &nbsp; &nbsp;数据库中提出:
        
    <asp:TextBox runat="server" ID="autocom"></asp:TextBox>
        
    <!--<input type="text" id="autocom" />-->
        
    <div id="content">
        
    </div>
        
    </form>
    </body>

    data.aspx后台代码:


           protected void Page_Load(object sender, EventArgs e)

      {
                if (!IsPostBack)
                {
                    
    //bool flag = true;
                    
    //Response.Write(flag ? "1" : "0");

                    Response.Clear();
                    Response.Charset = "utf-8";
                    Response.Buffer = true;
                    
    this.EnableViewState = false;
                    Response.ContentEncoding = System.Text.Encoding.UTF8;
                    Response.ContentType = "text/plain";
                    Response.Write(GetLikeUserName());
                    Response.Flush();
                    Response.Close();
                    Response.End();
                }
            }

            
    private string GetLikeUserName()
            {
                
    string param = Request.QueryString["q"].ToString();//获取参数
                string bar = Request.QueryString["bar"].ToString();//

                
    string[] str = { "January""Ceshi""jQuery""josn""February""March""April""May""June""July""August""September""October""November""December" };
                StringBuilder sbstr = new StringBuilder();
                sbstr.Append("[");
                
    for (int i = 0; i < str.Length; i++)
                {
                    
    if (str[i].Contains(param))
                    {
                        
    if (i == str.Length - 1)
                        {
                            sbstr.Append("{name:'" + str[i] + "',to:'最后中文测试" + i + "'}");
                        }
                        
    else
                        {
                            sbstr.Append("{name:'" + str[i] + "',to:'中文测试" + i + "'},");
                        }
                    }
                }
                sbstr.Append("]");

                
    return sbstr.ToString();
            }

    效果图:

  • 相关阅读:
    财务对账系统设计
    工作中快速成长的10个技巧
    越来越火的"中台"是什么
    基于token的多平台身份认证架构设计
    了解Scala 宏
    Scala反射(一)
    一文学会Scala
    Scala 隐式转换及应用
    如何看MySql执行计划explain(或desc)
    sun.misc.Unsafe 详解
  • 原文地址:https://www.cnblogs.com/cr7/p/2037575.html
Copyright © 2020-2023  润新知