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

最新推荐文章于 2021-03-11 03:05:58 发布

原创最新推荐文章于 2021-03-11 03:05:58 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #textbox #webform #javascript #string #div

纯属个人涂鸭专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用ASP.NET结合AJAX实现文本框输入时自动填充下拉框的功能。通过JavaScript处理键盘事件，根据输入内容从服务器获取匹配项，并以下拉列表形式展示供用户选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据"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>

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" onmouseover="javascript:this.style.backgroundColor='lightblue'" onclick="return gotTitle_onclick()">" + response.value[i].Trim() + "</div>";

}

if(which=="TextBox2")

{

s=s + "<div style="" class="gotTitle" onmouseover="javascript:this.style.backgroundColor='lightblue'" onmouseout="javascript:this.style.backgroundColor='white'" onclick="return gotTitle_onclick()">" + response.value[i].Trim() + "</div>";

}

if(which=="TextBox3")

{

s=s + "<div style="" class="gotTitle" onmouseover="javascript:this.style.backgroundColor='lightblue'" onclick="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>

<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 窗体设计器生成的代码

}

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;

}

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

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