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

功能:在textbox中输入内容,动态从数据库模糊查询显示到下拉框中,以供选择1.建立一aspx页面数据库
强烈推介IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码

功能:在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=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;

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
]

 

本文来源21aspnet,由javajgs_com转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/2715

发表评论