Hi,
By refering the below link i have created sample that full fill your requirement. So you need to modify the code as per your requirement. You need to bind the result as per the textbox value after clicking the table cell on client textchange event.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=txtSearch]').on("keyup", function () {
$.ajax({
type: "POST",
url: "CS.aspx/GetCustomers",
data: '{search:"' + $(this).val() + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) { alert(response.d); },
error: function (response) { alert(response.d); }
});
});
});
function OnSuccess(response) {
// Assign repeat column values
var repeatColumn = 3;
var table = "<table cellpadding='2' cellspacing='0' border='1' Style='width: 70%; border: dashed 2px #04AFEF; background-color: #B0E2F5'>";
if (response.d != '') {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Customers");
customers.each(function (i, item) {
if ((i == 0) || (i % repeatColumn) == 0) {
table += "<tr>";
}
var customer = $(this);
var contactName = customer.find("ContactName").text();
var customerID = customer.find("CustomerID").text();
var companyName = customer.find("CompanyName").text();
table += "<td><b>Contact Name:</b><span id='lblContactName' style='cursor:pointer;' class='contactName'> " + contactName + "</span><br/>" + "<b>Customer ID:</b>" + customerID + "<br/><b>Company Name:</b>" + companyName
table += "</td>";
if ((i == customers.length - 1) || (((i + 1) % repeatColumn == 0)) || customers.length == 1) {
table += "</tr>";
}
});
}
else {
table += "<tr align='center'><td><b>No Result For the Criteria</b></td></tr>";
}
table += "</table>";
$("#dvCustomers").html(table);
$(".contactName").click(function () {
var contactname = $(this).html();
$('[id*=txtResultValue]').val(contactname);
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
Search value<asp:TextBox runat="server" ID="txtSearch" />
Result Value<asp:TextBox ID="txtResultValue" runat="server" />
<br />
<div id="dvCustomers">
</div>
<br /><br />
</form>
</body>
</html>
C#
public static DataSet GetCustomersData(string search)
{
string query = "[GetCustomersPageWiseSearch]";
SqlCommand cmd = new SqlCommand(query);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@PageIndex", 1);
cmd.Parameters.AddWithValue("@PageSize", 100);
cmd.Parameters.AddWithValue("@search", search);
cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
return GetData(cmd);
}
private static DataSet GetData(SqlCommand cmd)
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds, "Customers");
return ds;
}
}
}
}
[System.Web.Services.WebMethod]
public static string GetCustomers(string search)
{
DataSet ds = GetCustomersData(search);
if (ds.Tables[0].Rows.Count > 0)
{
return GetCustomersData(search).GetXml();
}
else
{
return "";
}
}
Screenshot
