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

您没有提供您尝试过的内容，因此根据您的要求假设并创建示例。我从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

如果你陷入困境，请告诉我们。我们很乐意帮助您。

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

1 个答案: