jQuery Autocomplete with C#/DotNet
jQuery Autocomplete with C#/DotNet
The Autocomplete widgets comes with jquery.ui. It provides suggestions while you type into the field.
e.g. If enter ‘A’ in textbox it will display list which is initial character is ‘A’
It is fairly straight forward to implement the autocomplete feature in your C#/DotNet project.
The datasource is a simple array e.g. var personList = [“Adams”, “Ana”, “John”, “Joe”, “Janet”, “Mac”, “Sac”];
CSS : First include the JQuery UI CSS
<link type="text/css" href="https://code.jquery.com/ui/1.8.13/themes/base/jquery-ui.css" rel="stylesheet" />
JS: Then include JQuery and JQuery UI related JS files.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.8.13/jquery-ui.min.js"></script>
C# Code: In your code behind, fetch the data as you want and set it in a HashTable. Set the serialized value of this hashtable to a hidden control.
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web.Script.Serialization;
private void PopulatePeople()
{
DataSet ds = new DataSet();
ArrayList list = new ArrayList();
ds = _person.LoadPersons();
foreach (DataRow dr in ds.Tables[0].Rows)
{
Hashtable entry = new Hashtable();
entry.Add("id", dr["personId"].ToString());
entry.Add("value", dr["personName"].ToString());
list.Add(entry);
}
JavaScriptSerializer jserializer = new JavaScriptSerializer();
hdnPeopleList.Value = jserializer.Serialize(list);
}
HTML code: Now on your aspx, put hidden field and the text field in which user would be typing in and the auto-populate box would populate.
<asp:HiddenField ID="hdnPeopleList" runat="server" />
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
or
<input id="txtName" type="text"/>
JQuery code: And finally the JQuery code 🙂 What we are doing here is, we read the value out of the hidden control. As we had serialized it at the back end, we can parse it as JSON. Once we get the JSON, all we have to do is give this parsed JSON as a source for the auto-complete.
If everything goes fine, your auto-complete box is ready to use. 🙂
If you do face any problem, drop us a line and we can help you out. Also, we are happy to share that Tudip is recognized as a Top .Net Development Companies on Software Development Company.
Happy Coding!!! 🙂
<script language="javascript" type="text/javascript">
$(function() {
var valOfHidden = htmlDecode($("#<%= hdnPeopleList.ClientID %>").val());
var peopleList = $.parseJSON(valOfHidden);
<!-- If you use HTML control just put id of control like $("#txtName").autocomplete({...}); -->
$("#<%= txtName.ClientID %>").autocomplete({
source: peopleList,
select: function(event, ui) {
alert("Selected person:" + ui.item.id);
}
});
});
function htmlEncode(value) {
if (value) {
return $('<div/>').text(value).html();
}
}
function htmlDecode(value) {
if (value) {
return $('<div/>').html(value).text();
}
}
</script>