如何在 ASP.NET 中制作自动完成文本框？

Posted 2023-03-05

【中文标题】如何在 ASP.NET 中制作自动完成文本框？

【英文标题】：How to make an autocomplete TextBox in ASP.NET?

【发布时间】：2011-04-20 17:47:14

【问题描述】：

如何在 C# 中创建一个绑定到数据源的autocomplete TextBox？

【参考方案1】：

aspx 页面编码

<form id="form1" runat="server">
       <input type="search" name="Search" placeholder="Search for a Product..." list="datalist1"
                    required="">
       <datalist id="datalist1" runat="server">

       </datalist>
 </form>

.cs 页面编码

protected void Page_Load(object sender, EventArgs e)

     autocomplete();

protected void autocomplete()

    Database p = new Database();
    DataSet ds = new DataSet();
    ds = p.sqlcall("select [name] from [stu_reg]");
    int row = ds.Tables[0].Rows.Count;
    string abc="";
    for (int i = 0; i < row;i++ )
        abc = abc + "<option>"+ds.Tables[0].Rows[i][0].ToString()+"</option>";
    datalist1.Innerhtml = abc;

这里的数据库是一个文件 (Database.cs)，我在其中创建了一个名为 sqlcall 的方法，用于从数据库中检索数据。

【参考方案2】：

您可以使用jQuery Autocomplete 或ASP.NET AJAX Toolkit Autocomplete

【讨论】：

我会在这里插话，我对 jQuery Autocomlete 有很好的经验。可以在docs.jquery.com/Plugins/autocomplete 找到文档。

【参考方案3】：

试试这个： .aspx 页面

<td>  
<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"OnTextChanged="TextBox1_TextChanged"></asp:TextBox>  
<asp:AutoCompleteExtender ServiceMethod="GetCompletionList" MinimumPrefixLength="1"  
   CompletionInterval="10" EnableCaching="false" CompletionSetCount="1" TargetControlID="TextBox1"  
   ID="AutoCompleteExtender1" runat="server" FirstRowSelected="false">  
      </asp:AutoCompleteExtender>  

现在从数据库自动填充：

public static List<string> GetCompletionList(string prefixText, int count)  
      
        return AutoFillProducts(prefixText);  

      

    private static List<string> AutoFillProducts(string prefixText)  
      
        using (SqlConnection con = new SqlConnection())  
          
            con.ConnectionString = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;  
            using (SqlCommand com = new SqlCommand())  
              
                com.CommandText = "select ProductName from ProdcutMaster where " + "ProductName like @Search + '%'";  
                com.Parameters.AddWithValue("@Search", prefixText);  
                com.Connection = con;  
                con.Open();  
                List<string> countryNames = new List<string>();  
                using (SqlDataReader sdr = com.ExecuteReader())  
                  
                    while (sdr.Read())  
                      
                        countryNames.Add(sdr["ProductName"].ToString());  
                      
                  
                con.Close();  
                return countryNames;  
              
          
      

现在：创建一个存储过程，根据从自动完成文本框中选择的产品获取产品详细信息。

Create Procedure GetProductDet  
(  
@ProductName varchar(50)    
)  
as  
begin  
Select BrandName,warranty,Price from ProdcutMaster where ProductName=@ProductName  
End   

创建函数名以获取产品详细信息::

private void GetProductMasterDet(string ProductName)  
      
        connection();  
        com = new SqlCommand("GetProductDet", con);  
        com.CommandType = CommandType.StoredProcedure;  
        com.Parameters.AddWithValue("@ProductName", ProductName);  
        SqlDataAdapter da = new SqlDataAdapter(com);  
        DataSet ds=new DataSet();  
        da.Fill(ds);  
        DataTable dt = ds.Tables[0];  
        con.Close();  
        //Binding TextBox From dataTable  
        txtbrandName.Text =dt.Rows[0]["BrandName"].ToString();  
        txtwarranty.Text = dt.Rows[0]["warranty"].ToString();  
        txtPrice.Text = dt.Rows[0]["Price"].ToString();   
    

自动回发应该是真的

<asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True" OnTextChanged="TextBox1_TextChanged"></asp:TextBox>

现在，调用这个函数

protected void TextBox1_TextChanged(object sender, EventArgs e)  
    
      //calling method and Passing Values  
      GetProductMasterDet(TextBox1.Text);  
   

【讨论】：

如果我得到“AutoCompleteExtender 不是已知元素”怎么办？

是否在每个文本输入时调用 TextChanged 函数？

【参考方案4】：

1-通过Nugget轻松安装AjaxControl Toolkit

PM> Install-Package AjaxControlToolkit

2-然后在标记中

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
</asp:ToolkitScriptManager>  

<asp:TextBox ID="txtMovie" runat="server"></asp:TextBox>  

<asp:AutoCompleteExtender  ID="AutoCompleteExtender1"  TargetControlID="txtMovie"   
    runat="server" />  

3- 在代码隐藏中：获取建议

[System.Web.Services.WebMethodAttribute(),System.Web.Script.Services.ScriptMethodAttribute()]  
    public static string[] GetCompletionList(string prefixText, int count, string contextKey)   
        // Create array of movies  
        string[] movies = "Star Wars", "Star Trek", "Superman", "Memento", "Shrek", "Shrek II";  

        // Return matching movies  
        return (from m in movies where m.StartsWith(prefixText,StringComparison.CurrentCultureIgnoreCase) select m).Take(count).ToArray();  
    

来源：http://www.asp.net/ajaxlibrary/act_autocomplete_simple.ashx

【参考方案5】：

我使用ajaxcontrol工具包的AutoComplete

【讨论】：

我不会（个人）推荐这个解决方案。在 2010 年，这个问题也许得到了回答。现在，不要使用这个。使用 javascript、jquery 等有更好的方法来做到这一点。