使用asp.net从数据库自动查询jQuery

Question

嗨，我的网络表单上有一个文本字段，当用户开始输入内容时，我想利用jquery的自动完成功能显示可能值的列表。

我在线上查看了许多教程，并且了解了在JavaScript中具有一系列值的基本教程。 但是，我希望文本框可用的值由SQL查询定义。

我浏览了stackoverflow，所有答案似乎都使​​用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 （再次引用外部位置）

有人知道一个很好的分步指南可以指导我完成该过程吗？

谢谢

Answer 1

您没有提供所尝试的内容，因此可以根据需要假设并创建样本 。 我从这里得到了很好的参考

所以我们开始：-

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

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

其次，在这种情况下，我们还将需要一个处理程序，该处理程序将处理您的AutoComplete请求

<%@ 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

如果您陷入这些困境，请告诉我们。 我们很高兴为您提供帮助。