Javascript ASP.net文本框实时搜索-GridView结果过滤器

我的设想是：；我正在尝试为我的ASP.net项目执行实时搜索功能。在表单中，我有一个描述文本框，用户将在其中键入搜索，当用户键入任何内容时，下面的GridView会相应地过滤结果。我曾在桌面应用程序上尝试过这一点，这并不是什么麻烦事，但最近我在Web应用程序上进行了尝试。任何帮助都将不胜感激。我相信有一个简单的方法可以做到这一点，但我似乎很难找到“那个”方法

以下是我已经尝试过的内容：
我曾尝试使用textbox的onTextChanged属性，但它仅在事件请求后填充。
我使用Ajax+JQuery添加了一个函数，该函数调用该方法，但gridview不显示数据。
在这里输入代码
$（函数（）{
GetCustomers（）；
});
$（“[id*=TxtDescription]”）。live（“keyup”，函数（）{
GetCustomers（）；
});
函数SearchTerm（）{
返回jQuery.trim（$（“[id*=TxtDescription]”）和.val（）；
};
函数GetCustomers（）{
$.ajax({
类型：“POST”，
url:“frmDrugMaster.aspx/GetCustomers”，
数据：{searchTerm:“'+searchTerm（）+'''''''}'，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：一旦成功，
故障：功能（响应）{
警报（response.d）；
},
错误：函数（响应）{
警报（response.d）；
}
});
}
var行；
函数OnSuccess（响应）{
var xmlDoc=$.parseXML（response.d）；
var xml=$（xmlDoc）；
var customers=xml.find（“药物”）；
警报（客户。长度）；
if（行==null）{
行=$（“[id*=gvCustomers]tr:last child”）.clone（true）；
}
$（“[id*=gvCustomers]tr”）。不是（$（“[id*=gvCustomers]tr:第一个子”）。删除（）；
如果（customers.length>0）{
警报（客户。长度）；
$。每个（客户、职能部门）{
var customer=$（此值）；
$（“td”，row.eq（0）.html（$（this.find）（“DR_Code”）.text（））；
$（“td”，row.eq（1）.html（$（this.find）（“DR_Description”）.text（））；
$（“td”，row.eq（2）.html（$（this.find）（“DR_UnitDose”）.text（））；
警报（$（（“td”，row）.eq（0）.html（$（this.find）（“DR_Description”）.text（））；
$（“[id*=gvCustomers]”。追加（行）；
$
行=$（“[id*=gvCustomers]tr:last child”）.clone（true）；
});
}否则{
var empty_row=row.clone（true）；
$（“td:first child”，空_行）.attr（“colspan”，$（“td”，行）.length）；
$（“td:first child”，空行）.attr（“align”，“center”）；
$（“td:first child”，空_行）.html（“未找到搜索条件的记录”）；
$（$，空_行）。不是（$（$（$，第一个子，空_行））。删除（）；
$（“[id*=gvCustomers]”。追加（行）；
}
};
[网络方法]
公共静态字符串GetCustomers（字符串搜索术语）
{
SqlConnection cn=新的SqlConnection（WebConfiguration Manager.ConnectionString[“dbconn”].ConnectionString）；
SqlCommand cmd=new SqlCommand（“从DRUGMASTER a中选择a.DR_UNITDOSE、a.DR_CODE、a.DR_DESCRIPTION、a.DR_GENERIC1、a.DR_GENERIC2、a.DR_GENERIC3、a.DR_GENERIC4、a.DR_COSTPRICE、a.DR_SELLPRICE、a.DR_STATUS.DRUGMASTER a，其中a.DR_CATEGORY=b.DC_CODE和DR_DESCRIPTION=”'“+searchTerm+”，cn”）；
cn.Open（）；
cmd.ExecuteNonQuery（）；
cn.Close（）；
DataTable dt=新的DataTable（）；
dt.TableName=“药品”；
SqlDataAdapter da=新的SqlDataAdapter（cmd）；
da.填充（dt）；
数据集ds=新数据集（）；
ds.Tables.Add（dt）；
返回ds.GetXml（）；
} 

我找到了一个解决方案，或者至少找到了一种解决方法。我使用了AJAX+JQuery。我刚刚为将应用文本更改的特定页面创建了一个web服务。使用的代码如下所示。希望这对某人有所帮助：

/*form*/
create a webform with  a textbox and a gridview:

/*Add this script*/
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
script type="text/javascript">
        $(function () {
            $("[id*=txtCountry]").on("keyup", function () {
                $.ajax({
                    type: "POST",
                    url: "WebForm2.aspx/GetCustomers",
                    data: '{searchTerm: "' + $(this).val() + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var row;
                        var xmlDoc = $.parseXML(response.d);
                        var xml = $(xmlDoc);
                        var customers = xml.find("Customers");
                        if (row == null) {
                            row = $("[id*=gvCustomers] tr:last-child").clone(true);
                        }
                        $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
                        if (customers.length > 0) { 
$.each(customers, function () {
                                $("td", row).eq(0).html($(this).find("PD_FSTNM").text());
                                $("td", row).eq(1).html($(this).find("PD_GENDER").text());
                                $("[id*=gvCustomers]").append(row);
                                row = $("[id*=gvCustomers] tr:last-child").clone(true);
                            });
                        } else {
                            var empty_row = row.clone(true);
                            $("td:first-child", empty_row).attr("colspan", $("td", row).length);
                            $("td:first-child", empty_row).attr("align", "center");
                            $("td:first-child", empty_row).html("No records found for the search criteria.");
                            $("td", empty_row).not($("td:first-child", empty_row)).remove();
                            $("[id*=gvCustomers]").append(empty_row);
                        }
                    }, 
failure: function (response) { alert(response.d); },

                });
            });
        });
    </script> 

/*C# Code*/
[System.Web.Services.WebMethod]
        public static string GetCustomers(string searchTerm = "")
        {
            string strConnString = ConfigurationManager.ConnectionStrings[""].ConnectionString;
            SqlConnection con = new SqlConnection(strConnString);
            string query = "SELECT * FROM patientdetails";
            if (!string.IsNullOrEmpty(searchTerm))
            {
                query += " WHERE PD_FSTNM LIKE '" + searchTerm + "%'";
            }
            SqlCommand cmd = new SqlCommand(query, con);
            cmd.CommandType = CommandType.Text;

            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            sda.Fill(ds, "Customers");
            return ds.GetXml();
        }

/*表格*/
创建带有文本框和gridview的Web表单：
/*添加此脚本*/
script type=“text/javascript”>
$（函数（）{
$（“[id*=txtCountry]”）。在（“keyup”上，函数（）{
$.ajax({
类型：“POST”，
url:“WebForm2.aspx/GetCustomers”，
数据：“{searchTerm:”+$（this.val（）+“}”，
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（响应）{
var行；
var xmlDoc=$.parseXML（response.d）；
var xml=$（xmlDoc）；
var customers=xml.find（“客户”）；
if（行==null）{
行=$（“[id*=gvCustomers]tr:last child”）.clone（true）；
}
$（“[id*=gvCustomers]tr”）。不是（$（“[id*=gvCustomers]tr:第一个子”）。删除（）；
如果（customers.length>0）{
$。每个（客户、职能部门）{
$（“td”，row.eq（0）.html（$（this.find）（“PD_FSTNM”）.text（））；
$（“td”，row.eq（1）.html（$（this.find）（“PD_GENDER”）.text（））；
$（“[id*=gvCustomers]”。追加（行）；
行=$（“[id*=gvCustomers]tr:last child”）.clone（true）；
});
}否则{
var empty_row=row.clone（true）；
$（“td:first child”，空_行）.attr（“colspan”，$（“td”，行）.length）；
$（“td:first child”，空行）.attr（“align”，“center”）；
$（“td:first child”，空_行）.html（“未找到搜索条件的记录”）；
$（“td”，空行）。不是（$（“td:f
/*form*/
create a webform with  a textbox and a gridview:

/*Add this script*/
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
script type="text/javascript">
        $(function () {
            $("[id*=txtCountry]").on("keyup", function () {
                $.ajax({
                    type: "POST",
                    url: "WebForm2.aspx/GetCustomers",
                    data: '{searchTerm: "' + $(this).val() + '"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        var row;
                        var xmlDoc = $.parseXML(response.d);
                        var xml = $(xmlDoc);
                        var customers = xml.find("Customers");
                        if (row == null) {
                            row = $("[id*=gvCustomers] tr:last-child").clone(true);
                        }
                        $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
                        if (customers.length > 0) { 
$.each(customers, function () {
                                $("td", row).eq(0).html($(this).find("PD_FSTNM").text());
                                $("td", row).eq(1).html($(this).find("PD_GENDER").text());
                                $("[id*=gvCustomers]").append(row);
                                row = $("[id*=gvCustomers] tr:last-child").clone(true);
                            });
                        } else {
                            var empty_row = row.clone(true);
                            $("td:first-child", empty_row).attr("colspan", $("td", row).length);
                            $("td:first-child", empty_row).attr("align", "center");
                            $("td:first-child", empty_row).html("No records found for the search criteria.");
                            $("td", empty_row).not($("td:first-child", empty_row)).remove();
                            $("[id*=gvCustomers]").append(empty_row);
                        }
                    }, 
failure: function (response) { alert(response.d); },

                });
            });
        });
    </script> 

/*C# Code*/
[System.Web.Services.WebMethod]
        public static string GetCustomers(string searchTerm = "")
        {
            string strConnString = ConfigurationManager.ConnectionStrings[""].ConnectionString;
            SqlConnection con = new SqlConnection(strConnString);
            string query = "SELECT * FROM patientdetails";
            if (!string.IsNullOrEmpty(searchTerm))
            {
                query += " WHERE PD_FSTNM LIKE '" + searchTerm + "%'";
            }
            SqlCommand cmd = new SqlCommand(query, con);
            cmd.CommandType = CommandType.Text;

            SqlDataAdapter sda = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            sda.Fill(ds, "Customers");
            return ds.GetXml();
        }