.NET仿百度谷歌智能提示实现

说明一点：由于作者水平低下当前功能目前只支持IE。

原理：当输入框有文本输入时即change事件发生时，异步请求某个处理程序，得到回发数据后在某个隐藏的DIV中显示。

页面HTML代码：

 请输入客户名称
 


                



        

//用于显示结果的DIV
    

处理程序代码：

protected void Page_Load(object sender, EventArgs e)
    {
        string key = Common.TQuery.GetSafeQueryString("v");
        if (key.Length > 0)
        {
            string filter = string.Empty;
            Model.User user = new Model.User(int.Parse(Session["User_ID"].ToString()));
            string length = Common.TQuery.GetSafeQueryString("l");
            Model.Customer customer = new Model.Customer();
            if (Common.TQuery.GetSafeQueryString("f") == "1")
            {
                filter = string.Empty;
            }
            DataTable dt = //根据参数查询列表；
            string html = string.Empty;
            if (dt.Rows.Count > 0)
            {
                int i = 0;
                foreach (DataRow dr in dt.Rows)
                {
                    string strName = dr["name"].ToString();
                    if (strName.IndexOf(key) == 0)
                    {
                        strName = key + "" + strName.Substring(key.Length) + "";
                    }
                    i++;
                    html += string.Format("
", i);
                    html += string.Format("{1}{2}

", i, strName, ((BL.CustomerType)Convert.ToInt32(dr["CType"])).ToString());
                }
                html += "


关闭



";
            }
            Response.Write(html);//返回一段html代码直接放到div中
            Response.End();
        }
    }

核心js代码：

      function checkCity(e,b,d)
      {
           var keycode=event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
           if(keycode!=38&&keycode!=40&&keycode!=13)
           {
                var c=document.getElementById("txtname");
                var s=document.getElementById("< % =drpcustomertype.ClientID %>");
                $.get('ajax/customer_list.aspx',{l: s.value,v: c.value,f: (document.getElementById("ckbcus").checked)?"1":"0",t: new Date()},
                function(result)
                {
                    var html = result;
                    if(result!=0)
                     {
                        document.getElementById("div_city").style.display='block';
                     }
                    else
                     {
                        document.getElementById("div_city").style.display  ='none';
                     }
                    $('#div_city').html(html);
                });
            }
        }

如有疑问，可留言，博主全天在线。