Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET
Tip/Trick

JQuery + ASP.NET auto complete without web service

Rate me:
Please Sign up or sign in to vote.
4.88/5 (8 votes)
9 Apr 2011CPOL1 min read 35.9K   24   10
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:

MIDL
$(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)


Written By
Software Developer Supergroup
South Africa South Africa
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralHi Guys Sorry for responding to the questions months after ... Pin
Seabata16-Nov-11 2:43
Seabata16-Nov-11 2:43 
Generalwhat if on the other hand anybody adds a new customer into t... Pin
Member 174238114-Nov-11 0:23
Member 174238114-Nov-11 0:23 
GeneralRe: what if on the other hand anybody adds a new customer into t... Pin
Seabata19-Jun-12 21:51
Seabata19-Jun-12 21:51 
GeneralI tried auto complete with 1.Webservice 2.Handler 3.Jquery ... Pin
jpratik19-Apr-11 4:45
jpratik19-Apr-11 4:45 
GeneralGreat short solution. Keep up the good work! Pin
Member 414818817-Apr-11 19:28
Member 414818817-Apr-11 19:28 
GeneralExcellent Tip. Keep it up Pin
Wonde Tadesse15-Apr-11 5:04
professionalWonde Tadesse15-Apr-11 5:04 
GeneralReason for my vote of 5 Nice Way!! Pin
Gandalf_TheWhite11-Apr-11 22:56
professionalGandalf_TheWhite11-Apr-11 22:56 
Reason for my vote of 5
Nice Way!!
GeneralYou can create Handlers in place of webservice if you had an... Pin
pankajupadhyay2911-Apr-11 22:10
professionalpankajupadhyay2911-Apr-11 22:10 
GeneralReason for my vote of 5 nice Pin
pankajupadhyay2911-Apr-11 22:08
professionalpankajupadhyay2911-Apr-11 22:08 
QuestionAny complete code sample? Pin
very-old-timer16-Oct-11 2:34
professionalvery-old-timer16-Oct-11 2:34 

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

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.