Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中
<div class="postText">http://www.cnblogs.com/images/cnblogs_com/singlepine/ajaxtextbox.JPG功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择
1.建立一aspx页面,html代码
<div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee;">http://www.cnblogs.com/Images/OutliningIndicators/None.gif<HTML>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif <HEAD>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif <title>WebForm1</title>
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif <SCRIPT language="javascript">http://www.cnblogs.com/Images/dot.gif
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif //城市------------------------------
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif function cityResult()
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif var city=document.getElementById("TextBox1");
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif WebForm1.GetCityList(city.value,get_city_Result_CallBack);
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif function get_city_Result_CallBack(response)
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif if (response.value != null)
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif //debugger;
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif document.getElementById("DropDownList1").style.display="block";
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif document.getElementById("DropDownList1").length=0;
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif var ds = response.value;
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif if(ds != null && typeof(ds) == "object" && ds.Tables != null)
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif for(var i=0; i<ds.Tables[0].Rows.length; i++)
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif var name=ds.Tables[0].Rows.city;
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif var id=ds.Tables[0].Rows.cityID;
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif document.getElementById("DropDownList1").options.add(new Option(name,id));
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif else
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif document.getElementById("DropDownList1").style.display="none";
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif return
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif function getData()
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif http://www.cnblogs.com/Images/dot.gif{
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif var province=document.getElementById("DropDownList1");
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif var pindex = province.selectedIndex;
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif var pValue = province.options.value;
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif var pText = province.options.text;
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif document.getElementById("<%=TextBox1.ClientID%>").innerText=pText;
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif }
http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif </SCRIPT>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif </HEAD>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif <body>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif <form id="Form1" method="post" runat="server">
http://www.cnblogs.com/Images/OutliningIndicators/None.gif <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif <br>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif <asp:DropDownList ID="DropDownList1" runat="server" Width="192px" style="display:none"></asp:DropDownList>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif </form>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif </body>
http://www.cnblogs.com/Images/OutliningIndicators/None.gif</HTML>
页:
[1]