benben 发表于 2013-1-23 03:00:01

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]
查看完整版本: Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中