This funcionality is called auto-complete
first of all you will need this js file:
jquery-ui-1.8.20.custom.min.js
and css file:
jquery-ui-1.8.20.custom.css
1.place link of these files on page where you want to use auto-complete just like this:
<script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<link href="Styles/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
2.then use this script:
<script type="text/javascript">
$(document).ready(function () {
$('input[id$=textboxid]').autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "pagename.aspx/getReason",
data: "{'keywords':'" + request.term + "'}",
dataType: "json",
async: true,
success: function (data) {
response(data.d);
},
error: function (result) {
}
});
},
minLength: 2
});
});
</script>
3.then add this method in code behind (.cs) file:
[WebMethod]
public static IList<string> getReason(string keywords)
{
int count = 0;
IList<string> result = new List<string>();
string constr = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["connectionstring"].ConnectionString;
SqlConnection con1 = new SqlConnection(constr);
SqlCommand cmd1 = con1.CreateCommand();
cmd1.CommandText = "select distinct column_name from tablename where column_name like '%" + keywords + "%'";
try
{
con1.Open();
SqlDataReader dr = cmd1.ExecuteReader();
while (dr.Read())
{
count++;
result.Add(dr["column_name"].ToString());
if (count == 100)
break;
}
con1.Close();
return result;
}
catch
{
return null;
}
}