This Way,
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("[id*=txtSearch]").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/Service.asmx/GetCustomers") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
var text = this.value.split(/,\s*/);
text.pop();
text.push(i.item.value);
text.push("");
this.value = text.join(", ");
var value = $("[id*=hfCustomerId]").val().split(/,\s*/);
value.pop();
value.push(i.item.val);
value.push("");
$("#[id*=hfCustomerId]")[0].value = value.join(", ");
return false;
},
minLength: 1
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Name" />
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
<asp:HiddenField ID="hfCustomerId" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" />
</form>
</body>
</html>
C#:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Name"), new DataColumn("Age") });
dt.Rows.Add("John", "12");
dt.Rows.Add("Sam", "42");
dt.Rows.Add("Mike", "31");
dt.Rows.Add("Jerry", "19");
dt.Rows.Add("Thomas", "77");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
protected void Submit(object sender, EventArgs e)
{
string allCustomerName = string.Empty;
foreach (GridViewRow row in GridView1.Rows)
{
string customerName = Request.Form[row.FindControl("txtSearch").UniqueID];
allCustomerName += customerName + ",";
string customerId = Request.Form[row.FindControl("hfCustomerId").UniqueID];
}
}
ASMX:
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string[] GetCustomers(string prefix)
{
List<string> customers = new List<string>();
using (SqlConnection conn = new SqlConnection())
{
List<string> terms = prefix.Split(',').ToList();
terms = terms.Select(s => s.Trim()).ToList();
//Extract the term to be searched from the list
string searchTerm = terms.LastOrDefault().ToString().Trim();
//Return if Search Term is empty
if (string.IsNullOrEmpty(searchTerm))
{
return new string[0];
}
//Populate the terms that need to be filtered out
List<string> excludeTerms = new List<string>();
if (terms.Count > 1)
{
terms.RemoveAt(terms.Count - 1);
excludeTerms = terms;
}
conn.ConnectionString = ConfigurationManager
.ConnectionStrings["conString"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
string query = "select ContactName, CustomerId from Customers where " +
"ContactName like @SearchText + '%'";
//Filter out the existing searched items
if (excludeTerms.Count > 0)
{
query += string.Format(" and ContactName not in ({0})", string.Join(",", excludeTerms.Select(s => "'" + s + "'").ToArray()));
}
cmd.CommandText = query;
cmd.Parameters.AddWithValue("@SearchText", searchTerm);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(string.Format("{0}-{1}", sdr["ContactName"], sdr["CustomerId"]));
}
}
conn.Close();
}
return customers.ToArray();
}
}
Image:
Thank You.
