Click here to Skip to main content
Click here to Skip to main content

JQuery + ASP.NET auto complete without web service

By , 9 Apr 2011
 
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.
  1. 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.
  2. The Array name is the name you passed in the
    ClientScript.RegisterArrayDeclaration

     
    It must exist in runtime for you code to execute correctly.
Now your Autocomplete should be working!
 
Please feel free to correct me where I am wrong as I am still learning....

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Seabata
Software Developer Avanade
South Africa South Africa
Member
No Biography provided

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board.
Search this forum  
    Spacing  Noise  Layout  Per page   
GeneralHi Guys Sorry for responding to the questions months after ...memberSeabata16 Nov '11 - 2:43 
Hi Guys
 
Sorry for responding to the questions months after they were posted. I will post the Full Code and I only tested my code in .NET 4.0 so you will have to verify is it works with other versions of .NET.
 
@jpratik: I think it depends on how much data you are going to load into the Array, I suggest that if you have few records(Less than 500) you can still use my way of doing it.
 
@Raghu: I will post the rest of my code as alternative just now.
 
@Member 1742...: Your datasource Array can be updated anytime, as soon as you refresh the page the array is recreated with new Customer info.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Permalink | Advertise | Privacy | Mobile
Web02 | 2.6.130523.1 | Last Updated 9 Apr 2011
Article Copyright 2011 by Seabata
Everything else Copyright © CodeProject, 1999-2013
Terms of Use
Layout: fixed | fluid