Ajax实现在textbox中输入内容,动态从数据库中模糊查询显示到下拉框中

晨曦之光 发布于 2012/03/09 14:59
阅读 656
收藏 0

功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择

1.建立一aspx页面,html代码

< 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=;             
            
var ds = response.value;
                    
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
                    
{                    
                        
for(var i=; i<ds.Tables[].Rows.length; i++)
                
{
                    
var name=ds.Tables[].Rows[i].city;
                
var id=ds.Tables[].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;
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

        
GetCityList
        
GetDataSet

    }

}
3. 源代码下载   
4.数据库脚本
CREATE   TABLE   [ dbo ] . [ city ] (
    
[ 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 ]


 
原文链接: http://blog.csdn.net/21aspnet/article/details/1534281
加载中
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部