使用asp.net从数据库中自动完成JQuery

Posted 2023-05-08

【中文标题】使用asp.net从数据库中自动完成JQuery

【英文标题】：JQuery autocomplete from database with asp.net

【发布时间】：2016-03-04 02:18:10

【问题描述】：

您好，我的 Web 表单上有一个文本字段，我想利用 jquery 自动完成功能在用户开始输入时显示可能值的列表。

我查看了大量在线教程，并且我了解在 javascript 中有一组值的基本教程。但是，我希望我的文本框可用的值由 SQL 查询定义。

我浏览过***，所有答案似乎都使​​用php，但我正在使用asp.net和C#构建我的网站，我完全没有php经验。

我曾尝试在网上完成以下示例，但由于某种原因走到了死胡同。

http://www.dotnetcurry.com/jquery/1129/jqueryui-autocomplete-using-remote-data（由于工作场所的限制，我无法引用外部位置） http://www.aspsnippets.com/Articles/Implement-jQuery-Autocomplete-using-Web-Service-in-ASP.Net.aspx（再次引用外部位置）

有人知道可以指导我完成整个过程的良好分步教程吗？

谢谢

【问题讨论】：

看看这个：forums.asp.net/t/…

太棒了，现在可以使用了，谢谢！

任何人都可以解释否决票吗？

【参考方案1】：

您还没有提供您尝试过的内容，因此根据您的要求假设并创建一个示例。我从here得到了很好的参考

所以我们开始：-

首先，您需要为要从中获取数据创建一个数据库。为此，您需要创建一个connection string。下面是我使用Northwind database的示例

<connectionStrings>
  <addname="constr"connectionString="Data Source = .\SQLExpress;       
   Initial Catalog = Northwind; Integrated Security = true"/></connectionStrings>

其次，在这种情况下，我们还需要一个处理程序来处理您的自动完成请求

<%@ WebHandler Language="C#" Class="Search_CS" %>


using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;

public class Search_CS : IHttpHandler 


public void ProcessRequest (HttpContext context) 
    string prefixText = context.Request.QueryString["q"];
    using (SqlConnection conn = new SqlConnection())
    
        conn.ConnectionString = ConfigurationManager
                .ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand())
        
            cmd.CommandText = "select ContactName from Customers where " +
            "ContactName like @SearchText + '%'";
            cmd.Parameters.AddWithValue("@SearchText", prefixText);
            cmd.Connection = conn;
            StringBuilder sb = new StringBuilder();
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            
                while (sdr.Read())
                
                    sb.Append(sdr["ContactName"])
                        .Append(Environment.NewLine);
                
            
            conn.Close();
            context.Response.Write(sb.ToString());
        
    


public bool IsReusable 
    get 
        return false;
    

之后，您需要在您的 aspx 页面中调用 javascript 函数，以便您的 autocomplete 部分可以正常工作。

<link href="css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() 
        $("#<%=txtSearch.ClientID%>").autocomplete('Search_CS.ashx');
    );      
</script>

<form id="form1" runat="server">
    <div>
        <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
    </div>
    </form>

这就是你需要实现的东西。

下面是它的样子，

另见相关插件文档。

https://api.jqueryui.com/autocomplete/

Jquery 自动完成类别。

https://jqueryui.com/autocomplete/#categories

如果您遇到这些问题，请告诉我们。我们很乐意为您提供帮助。