Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择
1.建立一aspx页面,html代码
<HEAD>
<title>WebForm1</title>
<SCRIPT language="javascript">
//城市------------------------------
function cityResult()
{
var city=document.getElementById("TextBox1");
WebForm1.GetCityList(city.value,get_city_Result_CallBack);
}
function get_city_Result_CallBack(response)
{
if (response.value != null)
{
//debugger;
document.getElementById("DropDownList1").style.display="block";
document.getElementById("DropDownList1").length=0;
var ds = response.value;
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
{
for(var i=0; i<ds.Tables[0].Rows.length; i++)
{
var name=ds.Tables[0].Rows[i].city;
var id=ds.Tables[0].Rows[i].cityID;
document.getElementById("DropDownList1").options.add(new Option(name,id));
}
}
}
else
{
document.getElementById("DropDownList1").style.display="none";
}
return
}
function getData()
{
var province=document.getElementById("DropDownList1");
var pindex = province.selectedIndex;
var pValue = province.options[pindex].value;
var pText = province.options[pindex].text;
document.getElementById("<%=TextBox1.ClientID%>").innerText=pText;
}
</SCRIPT>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br>
<asp:DropDownList ID="DropDownList1" runat="server" Width="192px" style="display:none"></asp:DropDownList>
</form>
</body>
</HTML>
2.cs代码
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;
using System.Data.SqlClient;
namespace ajaxselect
{
/**//// <summary>
/// Summary description for WebForm1.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.TextBox TextBox1;
protected System.Web.UI.WebControls.DropDownList DropDownList1;
private void Page_Load(object sender, System.EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
if (!Page.IsPostBack)
{
this.TextBox1.Attributes.Add("onchange", "cityResult();");
this.DropDownList1.Attributes.Add("onclick", "getData();");
}
}
Web Form Designer generated code#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}
/**//// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
}
#endregion
GetCityList#region GetCityList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
public DataSet GetCityList(int provinceid)
{
string sql = "select * from city where father like '%" + provinceid + "%'";
return GetDataSet(sql);
}
#endregion
GetDataSet#region GetDataSet
public static DataSet GetDataSet(string sql)
{
string ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
SqlDataAdapter sda = new SqlDataAdapter(sql, ConnectionString);
DataSet ds = new DataSet();
sda.Fill(ds);
return ds;
}
#endregion
}
}
3.源代码下载
4.数据库脚本
[id] [int] NOT NULL,
[cityID] [nvarchar](6) COLLATE Chinese_PRC_CI_AS NULL,
[city] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,
[father] [nvarchar](6) COLLATE Chinese_PRC_CI_AS NULL,
CONSTRAINT [PK_city] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中相关推荐
- 怎么把php查询到的值显示到下拉框中_RazorSQL for Mac(数据库工具查询)8.5.3
razorsql mac版更新日志 变化 查询结果:如果有多个查询结果选项卡,则从查询结果选项卡中选择比较查询结果选项将填充比较工具中的两个查询 漏洞修补 不需要重新启动razorsql才能生效的首选 ...
- 怎么把php查询到的值显示到下拉框中_RazorSQL for Mac(数据库工具查询) v8.5.0
RazorSQL Mac是一款专门为mac用户推出的数据库管理软件,允许您从一个数据库工具查询,更新,导航和管理所有主要数据库,RazorSQL Mac功能强大还支持SQL的编辑.数据库管理工具,支持 ...
- 获取数据库内容放入下拉框中
获取数据库里的数据放入下拉框中,使下拉框显示的内容是数据库里的内容 功能分析: 设计并实现数据库 插入相关数据 在登陆页面点击注册按钮时跳到Servlet中 在Servlet中连接数据库 查询内容放入 ...
- Easyexcel生成excel并通过自定义注解实现下拉框以及动态下拉框(将数据库中的数据显示在excel下拉框中)
首先需要定义excel实体类 @Data @ColumnWidth(22) @HeadRowHeight(30) public class ExcelProductDTO {//动态下拉框,可以查询数 ...
- 两个下拉框相关联ajax,触发第二个下拉框以显示基于从第一个下拉框中选择的值的值ajax...
我有两个引导程序下拉框.当我们点击另一个下拉菜单时,其中一个会根据用户选择的国家显示来自数据库的所有国家名称,另一个下拉菜单应该选择状态. 当我点击一个下拉菜单时,我做了一个ajax请求来显示国家名称 ...
- 既可以输入新的信息,又可以从下拉框中选择的代码
<table> <tr> <td style="font-size: 12px;"> 既可以输入新的信息,又可以从下拉框中选择: </td ...
- JavaScript获取select下拉框中的第一个值
JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源代码 <!DOCTYPE html PUBLIC "-//W3C//DT ...
- avue下拉框中属性可以显示,但不能选中
1.avue下拉框中属性可以显示,但不能选中 追其原因,我对表单分组了,下拉框放在了group组内的column组里面,导致层数过多,产生死循环的bug 2.解决方法: 取消分组,把所有的属性放到co ...
- 抖音下拉框中的下拉词是怎么出来的?
疑问:抖音下拉框中的下拉词是怎么出来的? 抖音下拉词展示设想 抖音下拉设想验证 抖音下拉词出现思路总结 抖音下拉词展示设想 昔年认为,抖音下拉词框中的下拉词出现与否,是根据关注热度去生成的,如果某一个 ...
最新文章
- 值类型与引用类型的区别
- 如何在ubuntu中安装mysql与mysql workbench
- Win2003和Win2008防火墙导致FTP服务器不能访问的解决方法
- MYSQL的集群的安装与配置(mysql-5.1.21)
- Jsoup解析HTML字符串
- 第四课-Log的使用
- 基于centos6.5安装ElasticSearch
- 在c语言中定义共用型数据类型的关键字是,C语言的关键字共有32个,根据关键字的作用,可分其为数据类型关键...
- Geodatabase模型
- 查找数组中被删除的一个元素
- SPOJ LIS2 Another Longest Increasing Subsequence Problem 三维偏序最长链 CDQ分治
- ISODrive使Ubuntu Touch手机变身电脑系统启动盘(UBports之“DriveDroid”)
- framework层Service的基础知识和常见问题
- Android报错:The processing instruction target matching [xX][mM][lL] is not allowed.
- 单片机c语言实验报告心得,单片机实习心得体会
- python 残差图_为啥一定要用残差图检查你的回归分析?
- 虚拟服务器网络未识别,vm虚拟机未识别的网络
- 第五(模块、包说明)
- 如何快速掌握一门新的技术
- 【算法基础12】最小生成树的两种解法(普里姆、克鲁斯卡尔)
热门文章
- www服务器提供的第一个信息页面,第14章WWW服务
- php while 存钱,php趣味编程 -php存钱的问题
- 如何将c语言改写成汇编语言,如何把汇编语言转换成C语言
- cmd 文本替换_将CMD信息保存为文件
- C指针5:字符串指针(指向字符串的指针)
- LabVIEW实现CRC校验
- 【网络爬虫】(1) 网络请求,urllib库介绍
- python字符串基本形式_python字符串常用方式
- 在Ubuntu 16.04.04 LTS上调研QUIC开源项目minq笔记
- 在Ubuntu 14.04 64bit上安装网易云音乐Linux版本(最新官方版)