AJAX 无刷新 文本框提示条,用层来提示[原创]

根据"AJAX基本应用之:根据输入内容自动填充下拉框。(ASP.NET版)[转] ",更改的提示,可用方向盘上下选择需要的内容,文本框无记录时,按删除键自动进行提示

 

前台代码

<% @ Page language = " c# "  Codebehind = " WebForm2.aspx.cs "  AutoEventWireup = " false "  Inherits = " ajax10.WebForm2 "   %>
<! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.0 Transitional//EN "   >
< HTML >
     < HEAD >
         < title > WebForm2 </ title >
         < meta content = " Microsoft Visual Studio .NET 7.1 "  name = " GENERATOR " >
         < meta content = " C# "  name = " CODE_LANGUAGE " >
         < meta content = " JavaScript "  name = " vs_defaultClientScript " >
         < meta content = " http://schemas.microsoft.com/intellisense/ie5 "  name = " vs_targetSchema " >
         < script language = " javascript " >
        var index,which;
        function Text1_onkeyup(str)
         ... {
        
        var s=document.getElementById(str).getBoundingClientRect();//得控件绝对位置   ;getElementById(str)查找对象
        document.getElementById("div1").style.left=s.left;
        document.getElementById("div1").style.top=s.bottom;
        document.getElementById("div1").style.width=document.getElementById(str).style.width;
        
        switch (window.event.keyCode)
        ...{
        
            case 13: //回车
                document.getElementById("div1").style.visibility="hidden";
                break;
            case 40://向右箭头
            case 39: //向下箭头
                if (index < document.getElementById("div1").childNodes.length) 
                ...{
                    index=index+1;
                }
                for (i=1;i<=document.getElementById("div1").childNodes.length;i++)
                ...{
                    if (i==index)
                    ...{
                        document.getElementById(str).value=document.getElementById("div1").childNodes[index-1].innerText;//取值  ;   innerHTML:取代码
                        document.getElementById("div1").childNodes[index-1].style.backgroundColor="lightblue";
                    }
                    else
                    ...{
                        document.getElementById("div1").childNodes[i-1].style.backgroundColor="white";//背景变白
                        
                    }
                }
                break;
            case 38://向左箭头
            case 37://向上箭头 
                if (index>1) 
                ...{
                    index=index-1;
                }
                for (i=1;i<=document.getElementById("div1").childNodes.length;i++)
                ...{
                    if (i==index)
                    ...{
                        document.getElementById(str).value=document.getElementById("div1").childNodes[index-1].innerText;//.substr(1);
                        document.getElementById("div1").childNodes[index-1].style.backgroundColor="lightblue";
                    }
                    else
                    ...{
                        document.getElementById("div1").childNodes[i-1].style.backgroundColor="white";
                    }
                }
                break;
            default:
                index=0;
                which=str;
                if(str=="TextBox1")
                ...{
                    stuInfoView.getMatchedStuId(document.getElementById(str).value,getGG_callBack);
                }
                if(str=="TextBox2")
                ...{
                    stuInfoView.getB_KH_name(document.getElementById(str).value,getGG_callBack);
                }
                if(str=="TextBox3")
                ...{
                    stuInfoView.getC_CP2_name(document.getElementById(str).value,getGG_callBack);
                }
        }
    }
    String.prototype.Trim  =  function() 
         ... { 
            return this.replace(/(^s*)|(s*$)/g, ""); 
        }  
    function getGG_callBack(response)
     ... {
        if(response.value.length != 0)
        ...{       　　　            
　　　　  var ds = response.value;
                     
           var s;
           s="";
            for(var i=0;i<response.value.length;++i)
　　　　    ...{
　　　　　　 var sd;
             if(which=="TextBox1")
             ...{
                s=s + "<div style="" class="gotTitle" οnmοuseοver="javascript:this.style.backgroundColor='lightblue'" οnclick="return gotTitle_onclick()">" + response.value[i].Trim() + "</div>";
             }
             if(which=="TextBox2")
             ...{
                s=s + "<div style="" class="gotTitle" οnmοuseοver="javascript:this.style.backgroundColor='lightblue'" οnmοuseοut="javascript:this.style.backgroundColor='white'" οnclick="return gotTitle_onclick()">" + response.value[i].Trim() + "</div>";
             }
              if(which=="TextBox3")
             ...{
                s=s + "<div style="" class="gotTitle" οnmοuseοver="javascript:this.style.backgroundColor='lightblue'" οnclick="return gotTitle_onclick()">" + response.value[i].Trim() + "</div>";
             }
　　　　    } 
　　　　    document.getElementById("div1").innerHTML=s;
            document.getElementById("div1").style.visibility="visible";               
           
         }
      return
     }
    function gotTitle_onclick()
     ... {
        if (window.event.srcElement.className="gotTitle")
        ...{
            document.getElementById(str).value=window.event.srcElement.innerText;//.substr(1);
            document.getElementById("div1").style.visibility="hidden";
        }
    }

    function gotTitle_onblur()
     ... {
        document.getElementById("div1").style.visibility="hidden";
    }
         </ script >
     </ HEAD >
     < body MS_POSITIONING = " GridLayout " >
         < form id = " Form1 "  method = " post "  runat = " server " >
             < FONT face = " 宋体 " >
                 < div  class = " list "  id = " div1 "  onblur = " return gotTitle_onblur() "  style = " Z-INDEX: 103; LEFT: 8px; POSITION: absolute; TOP: 8px; BACKGROUND-COLOR: #7d84b9 " ></ div >
                 < asp:textbox id = " TextBox1 "  style = " Z-INDEX: 101; LEFT: 112px; POSITION: absolute; TOP: 216px "
                    runat = " server " ></ asp:textbox >< asp:textbox id = " TextBox2 "  style = " Z-INDEX: 102; LEFT: 112px; POSITION: absolute; TOP: 176px "
                    runat = " server " ></ asp:textbox >
                 < asp:TextBox id = " TextBox3 "  style = " Z-INDEX: 104; LEFT: 112px; POSITION: absolute; TOP: 136px "
                    runat = " server " ></ asp:TextBox >
                 < asp:TextBox id = " TextBox4 "  style = " Z-INDEX: 105; LEFT: 112px; POSITION: absolute; TOP: 96px "  runat = " server " ></ asp:TextBox >
                 < asp:TextBox id = " TextBox5 "  style = " Z-INDEX: 106; LEFT: 112px; POSITION: absolute; TOP: 56px "  runat = " server " ></ asp:TextBox ></ FONT ></ form >
     </ body >
</ HTML >

 

后台代码

 

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;

namespace  ajax10
... {
    /**//// <summary>
    /// WebForm2 的摘要说明。
    /// </summary>
    public class WebForm2 : System.Web.UI.Page
    ...{
        protected System.Web.UI.WebControls.TextBox TextBox2;
        protected System.Web.UI.WebControls.TextBox TextBox3;
        protected System.Web.UI.WebControls.TextBox TextBox4;
        protected System.Web.UI.WebControls.TextBox TextBox5;
        protected System.Web.UI.WebControls.TextBox TextBox1;
    
        private void Page_Load(object sender, System.EventArgs e)
        ...{
            // 在此处放置用户代码以初始化页面
            Ajax.Utility.RegisterTypeForAjax(typeof(stuInfoView));
            this.TextBox1.Attributes.Add("onkeyup","Text1_onkeyup('TextBox1');");
            this.TextBox1.Attributes.Add("onblur","gotTitle_onblur();");
            this.TextBox2.Attributes.Add("onkeyup","Text1_onkeyup('TextBox2');");
            this.TextBox2.Attributes.Add("onblur","gotTitle_onblur();");
            this.TextBox3.Attributes.Add("onkeyup","Text1_onkeyup('TextBox3');");
            this.TextBox3.Attributes.Add("onblur","gotTitle_onblur();");
        }

        Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
        ...{
            //
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /**//// <summary>
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        ...{    
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion
    }
}

AJAX调用类

 

using  System;
using  System.Text;
using  System.Data;

namespace  ajax10
... {
    /**//// <summary>
    /// stuInfoView 的摘要说明。
    /// </summary>
    public class stuInfoView
    ...{
        public stuInfoView()
        ...{
            //
            // TODO: 在此处添加构造函数逻辑
            //
        }
        /**//// <summary>
        /// 读取AJAX表中数据
        /// </summary>
        /// <param name="stuId"></param>
        /// <returns></returns>
        [Ajax.AjaxMethod()]
        public static string[] getMatchedStuId(string stuId)
        ...{
            DataSet ds = INC.DB.Query("select name from ajax ");
            DataRow[] drs = ds.Tables[0].Select("name like '"+stuId+"%'");
            if(drs != null)
            ...{
                string[] result = new string[drs.Length];
                for(int i=0;i<drs.Length;i++)
                    result[i] = Convert.ToString(drs[i]["name"]);
                return result;
            }
            return null;
        }
        /**//// <summary>
        /// 读取客户简称
        /// </summary>
        /// <param name="kh_jc"></param>
        /// <returns></returns>
        [Ajax.AjaxMethod()]
        public static string[] getB_KH_name(string kh_jc)
        ...{            
            DataSet ds = INC.DB.Query("select kh_jc from b_kh where kh_jc like '"+kh_jc+"%'");
            DataRow[] drs = ds.Tables[0].Select("kh_jc like '"+kh_jc+"%'");
            if(drs != null)
            ...{
                string[] result = new string[drs.Length];
                for(int i=0;i<drs.Length;i++)
                    result[i] = Convert.ToString(drs[i]["kh_jc"]);
                return result;
            }
            return null;
        }
        /**//// <summary>
        /// 读取成品的名称(聚合查询)
        /// </summary>
        /// <param name="cp_name"></param>
        /// <returns></returns>
        [Ajax.AjaxMethod()]
        public static string[] getC_CP2_name(string cp_name)
        ...{
            StringBuilder strSql=new StringBuilder();
            strSql.Append("select kh_jc from c_cp2 ");
            strSql.Append(" where CP_NAME like %");
            strSql.Append(cp_name);
            strSql.Append("% ");
            strSql.Append("group BY CP_NAME ");

            DataSet ds = INC.DB.Query(strSql.ToString());
            DataRow[] drs = ds.Tables[0].Select("cp_name like '"+cp_name+"%'");
            if(drs != null)
            ...{
                string[] result = new string[drs.Length];
                for(int i=0;i<drs.Length;i++)
                    result[i] = Convert.ToString(drs[i]["cp_name"]);
                return result;
            }
            return null;
        }

    }
}