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.
its not working
ReplyDeleteHi Saleem, This is working example, check for any missing code, I have given complete code.
DeleteSorry its works Thq verry much
ReplyDeleteyou always welcome.
Deletehi but it take time to get 12000 records
ReplyDeletei am not able to find. the jquery and css file,help me from where to get them
ReplyDeleteHi,
DeleteYou can simply get these css and javascript file from jqueryui.com, Here you file find complete package of css and javascript files.
where we can find the javascript and css files to be added on the project
ReplyDeleteHi,
DeleteYou can simply get these css and javascript file from jqueryui.com, Here you file find complete package of css and javascript files.
Or you can simply search in google for these css and javascript file.
dfg
ReplyDeleteThank you so much:) :) :) We got solution :)
ReplyDeleteYou always welcome.
Deletehey i got autocomplete but iam unable to click on items insted i have to type all characters which i again time consuming to my project so is there any solution to this please let me know
ReplyDeletei am new tomthe jquery..please guide me that how can we add that .js filesand what logic should be written in it
ReplyDeletefrom where i could get
ReplyDelete1]Scripts/jquery-1.4.1.min.js"
2]Scripts/jquery-ui-1.8.20.custom.min.js
3]Css/jquery-ui-1.8.20.custom.css
these files.please let me know
YOu can download these files from jqueryui.com,
DeleteYOu can also directly search these files in google there you will get.
thanks for this program but i want to take name from begining only first letter. for example i write "a" and after that i want to see begining "a"
ReplyDelete