Home > JQuery > JQuery Autocomplete with ASP.Net

JQuery Autocomplete with ASP.Net

In this article I want to describe combination of Autocomplete of JQuery and ASP.Net web service. Up to now I really couldn’t find a good article about this issue so it can be useful in the web.

Autocomplete is a plugin of JQuery that you can be used to implement autocomplete with the least efforts. You can find it here.

JQuery Autocomplete plugin has a property called source, in Ajax based programming you should change its source regarding what is entered into the textbox. Assume that you enter “ala” after that a callback is generated that sends some parameters to the web service (textbox.text and other parameters that you want) then in the response data you can feed source property of Autocomplete plugin. I think this stage can be your unique part of your job.

AutoComplete

Fig 1

In this article I’ll discuss about generating a new callback on typing each new word and how to assign the returned value with the source property of Autocomplete plugin. You then can change the web service section with your desired code such as connecting to database and retrieving data on what is sent as parameter to the web service.

Web Service:

I start with web service because it is really simple.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Xml;

using System.Text;

using System.Web.Script.Services;

namespace ArticleDean.web.Service

{

/// <summary>

/// Summary description for WSDataService

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.ComponentModel.ToolboxItem(false)]

// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.

[ScriptService]

public class WSDataService : System.Web.Services.WebService

{

[WebMethod]

public string GetStates(string typedValue, string test)

{

test = "ALABAMA:ALASKA:AMERICAN SAMOA:ARIZONA:ARKANSAS:CALIFORNIA:COLORADO:CONNECTICUT:DELAWARE:DISTRICT OF COLUMBIA:FEDERATED STATES OF MICRONESIA:FLORIDA:GEORGIA:GUAM:HAWAII:IDAHO:ILLINOIS:INDIANA:IOWA:KANSAS:KENTUCKY:LOUISIANA:MAINE:MARSHALL ISLANDS:MARYLAND:MASSACHUSETTS:MICHIGAN:MINNESOTA:MISSISSIPPI:MISSOURI:MONTANA:NEBRASKA:NEVADA:NEW HAMPSHIRE:NEW JERSEY:NEW MEXICO:NEW YORK:NORTH CAROLINA:NORTH DAKOTA:NORTHERN MARIANA ISLANDS:OHIO:OKLAHOMA:OREGON:PALAU:PENNSYLVANIA:PUERTO RICO:RHODE ISLAND:SOUTH CAROLINA:SOUTH DAKOTA:TENNESSEE:TEXAS:UTAH:VERMONT:VIRGIN ISLANDS:VIRGINIA:WASHINGTON:WEST VIRGINIA:WISCONSIN:WYOMING";

return test;

}

}

}

The first parameter that web service gets is typedValue. This parameter returns the typed value in textbox. The second parameter is a test one; it is just to show how to send more than one parameter in JSON datatype. You can use them to retrieve your desired data from database but here we just return a long text with ‘:’ separator (This is for training purpose).

ASPX file:

Sorry that it is Image, because of the problem of wordpress to accept html and aspx code, I have to publish this section in image

In the front of the source, there is a function that returns the callback result. It has two parameters, the second one is a method called response (this is a key note) that you should pass the resulting data from callback to it.

In data section of Ajax, I wrote a JSON data, JSON is a pair of key, value that is separated by a ‘:’.

$(".QueryText").val()

returns the typed words in text box

In success section, I splited the resulting string with ‘:’ character and assigned it an array (because JavaScript is a dynamic type checker you don’t need to specify the variable as array, it detects it automatically). Then I sent it to the response method as parameter. This is the only way to return data to the source property of Autocomplete. [return] keyword can’t do this (I wasted a lot of my time to return a value from return keyword, so you can save yours).

Among Autocomplete properties I’m going to discuss some of them. First delay, this parameter is to postpone the callback request to the server. It is very important to do this because ignoring it causes a lot of overhead on the server (it would be a self Denial of Service attack :D). The next is minLength, it depicts that your Autocomplete sends the request after typing a specific number of characters. It also reduces the overhead if you increase it to a meaningful number according to your need.

In header of your form I included JQuery file (jquery-1.5.1.min.js), Autocomplete plugin file (jquery-ui-1.8.custom.min.js) this is a customized file; you can generate it at this address. And also a CSS file that is the official released theme for Autocomplete; you can download and edit it.

Should you have any questions comment me.

Love and peace for you all.

Advertisements
  1. forex
    April 10, 2011 at 12:14 pm

    Awesome post. Really enjoyed reading your blog posts.

    • May 7, 2013 at 7:42 am

      Thanks forex, I’m happy that you like it,

  2. May 7, 2013 at 4:08 am

    For newest news you have to pay a quick visit world wide
    web and on world-wide-web I found this site as a finest site for most recent updates.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: