使用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

如果您陷入這些困境，請告訴我們。 我們很高興為您提供幫助。