JQuery + ASP.NET auto complete without web service
JQuery + ASP.NET auto complete without web service
Ever thought of creating an auto complete that interact with Database/Data source in ASP.NET and wonder how you going to do it? Well, the answer is simple, you need a web service, right? Wrong!
In this article, I will explain how to create auto complete functionality in ASP.NET JQuery without using a web service.
First, let's make a list of things we are going to use:
1. Jquery Library
2. XML File(Data source)
3. ASP.NET Page
Let's get started.
In Visual Studio, create a web site/ web Application and then create two folders to put the JQuery Library and Css files. Create .aspx file and then add the code in the code behind. All I do in this code is simply read the XML file and then load it to the dataset (you can use xPath to manipulate xml data, I just happen to prefer using dataset.)
Here is my Code:
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { XmlDocument xDoc = new XmlDocument(); xDoc.Load(Server.MapPath("Data/Customers.xml")); DataSet ds = new DataSet(); XmlNodeReader xnr = new XmlNodeReader(xDoc); ds.ReadXml(xnr); foreach (DataRow _row in ds.Tables["Customers"].Rows) { ClientScript.RegisterArrayDeclaration("ListItems", "\"" + _row["ContactName"].ToString() + "\""); } } }This is a simple straight forward code, but it's important to note the
Clientscript.RegisterArrayDeclaration
which creates a JavaScript Array. We then Access the Array using Jquery like this:
$(function () {
$("#tags").autocomplete({
source: ListItems
});
});
Just few things I need to explain.
- Autocomplete expects an Array, so we create this in C#, so you can replace the XML with your Database source and you will be able to create an Array for the Autocomplete.
- The Array name is the name you passed in the
ClientScript.RegisterArrayDeclaration
It must exist in runtime for you code to execute correctly.