Auto complete TextBox is common for most of the application, but there are different ways to implement this functionality. Here I am explaining this functionality using JQuery and Database. In this example, I am implementing Auto complete functionality for "Name" field in database table. I have used following JavaScript and CSS files to complete this functionality.
JavaScript Files-
jquery-1.4.1.min.js
jquery-ui-1.8.20.custom.min.js
CSS Files-
jquery-ui-1.8.20.custom.css
Now Include these files in your application like this-
Make same directory structure as I have shown you in image.
Now design your .aspx page like this-
AutoComplete.aspx
<head runat="server">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<link href="Css/jquery-ui-1.8.20.custom.css" rel="stylesheet" type="text/css" />
<title>Auto complete TextBox</title>
<script type="text/javascript">
function AutoComplete() {
var names = $('#<%= hdnNames.ClientID %>').val();
if (names != null && names != "") {
var arrOfNames = names.split("?");
$("#<%=txtName.ClientID %>").autocomplete({
source: arrOfNames
});
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Enter Name:
</td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:HiddenField ID="hdnNames" runat="server" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
In this page I have taken one HiddenField, why- After reading all the names from table I am concatenating names with separator character "?" and assigning to HiddenField.
Now in script code (AutoComplete() function ), I am implementing functionality for auto complete TextBox after splitting value of HiddenField.
Server side code-
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
GetNames();
ClientScript.RegisterStartupScript(typeof(Page), "AutoComplete", "AutoComplete();",true);
}
}
private void GetNames()
{
try
{
SqlConnection con = new SqlConnection("Connection string");
con.Open();
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter("select name from employee", con);
da.Fill(ds);
if (ds!=null)
{
foreach (DataRow row in ds.Tables[0].Rows)
{
//concatenating value with separator character -"?"
hdnNames.Value = hdnNames.Value + row[0].ToString() + "?";
}
}
}
catch (Exception)
{
throw;
}
}
In server side code, I have defined one function (GetNames()) to get names form employee table and after concatenating assign to HiddenField value. The main backbone for this functionality is implementing by using this line-
ClientScript.RegisterStartupScript(typeof(Page), "AutoComplete", "AutoComplete();",true);
Using this line, I am binding Auto complete feature to txtName textBox.
Now done, After running the application output will be like this-
Thanks.
