Skip to content

jQuery autocomplete plugin with ASMX web service and JSON

I’m trying to find more reasons to switch a lot of my js/ajax ui over to jQuery recently. This is due to my excursions into Rails and Sinatra outside of work, and also because I feel like some of the MS Ajax Toolkit extenders seem to be bloated at times. I also figure that since I intend to dip my feet more into the ASP.NET MVC framework, jQuery seems to be very standard there. 

That brings me to (one of) the jQuery Autocomplete plugins. I need this functionality in an ASP.NET webforms application and wanted to give it a shot. I started messing with “jQuery Autocomplete plugin 1.1″ by Jörn Zaefferer. You can find the code and info at http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

I’m mostly interested in doing an autocomplete via a remote web service call that returns json data. The example in the zip file includes a little php page that just responds to a HTTP-GET and spits out some hard-coded json. I’m working in .NET, so I made a simple ASMX web service to query my database and return a DataTable as json. (Note – There are isues with the built-in serializer to return a DataTable as json. A google search will find you a number of functions or alternate ways to generate a json string from a DataTable.) 

Right away, I found I was having problems with the autocomplete in this environment. First off, you have the whole issue with ASMX web methods only accepting a POST by default. This is easy to change, but not advised. You can find info on that issue here – http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/ and some other good info here – http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/ 

You’ll also notice in the above blog links that there can often be issues when POST-ing to a web method with encoding set to json, that you will need to pass your json params as a string. If you’re using something like Firebug to watch your ajax posts, you’ll catch this right away. 

But the main issue for me were the assumptions that the autocomplete plugin makes. It, by default, will only do a HTTP-GET. You can use the $.ajaxSetup in jQuery to set your future ajax calls to a default, but I wanted the ability to make this decision when calling the autocomplete plugin. 

I made these changes to jquery.autocomplete.js in the $.ajax section :

$.ajax({
// try to leverage ajaxQueue plugin to abort previous requests
mode: "abort",
// limit abortion to this input
port: "autocomplete" + input.name,
dataType: options.dataType,
//setup new options for asmx - amokan
type: options.httpMethod,
contentType: options.contentType,
//end new options - amokan
url: options.url,

This allows me to now handle my client side code a little better.

$("#task").autocomplete(
"http://somecomputername/jsonServiceTest/Testing.asmx/GetSomeDataNoParam",
{
dataType: 'json',
httpMethod: 'POST',
contentType: 'application/json; charset=utf-8',
max: 100,
scroll: true,
matchContains: true,
minChars: 3,
parse: function(data) {
var rows = new Array();
//your parsing logic
},
formatItem: function(row, i, n) {
//do something
},
width: 260
}
);

I’m still working on cleaning up the data parameter section of the plugin a bit before I post the full code.
If you’re curious, here is my ASMX method. Be sure to add the [ScriptService] attribute to your class in the ASMX file so it can handle AJAX properly. If you are using an older .NET without the System.Web.Script.Services namespace, this will not work for you. Note that the parameters “q” and “limit” are sent automatically by the autocomplete plugin. “Q” is the string currently typed into the text control so you can filter your query based on what the user has typed and “limit” is the max number of rows. Obviously, its up to you to implement these in your query if you chose to.  

[WebMethod]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
public string GetSomeDataNoParam(string q, int limit)
{
DataTable dtSomething;
//connect to db, do your exception handling, etc
dtSomething = //your DAL or whatever you use
//use my method to parse the datatable into json
return GetJSONString(dtSomething);
}

Hope this helps a bit and I will be sure to upload some more code as I get this working a bit smoother in my environment.

7 Comments

  1. Micheal

    I also had to json encode the data like this:
    data: JSON.stringify($.extend({q: lastWord(term),limit: options.max}, extraParams))

    Posted on 17-Jan-10 at 5:00 pm | Permalink
  2. Gaston Touron

    Micheal, what JSON library did you use ?
    Kind regards
    Gaston

    Posted on 17-Jan-10 at 5:00 pm | Permalink
  3. Cindy

    Hi Micheal,
    I’m trying to achieve wat u are trying to do, however i keep getting errors on creating e ajax request.
    May i take a look at ur complete implementation if possible?
    Thanks alot.

    Posted on 08-Feb-10 at 5:00 pm | Permalink
  4. SQ

    Hey! Great work … exactly what I was looking for! i’m about to try this out. have you done any more changes to it yet?

    Posted on 24-Jun-10 at 8:46 am | Permalink
  5. Rich Eisenberg

    give me some excellent ideas. thanks man

    Posted on 30-Jun-10 at 6:35 pm | Permalink
  6. I have not done any changes or more work on this due to a shift in priorities. And sorry for the late reply. I’ve been swamped at work and just noticed.

    Posted on 30-Aug-10 at 11:09 am | Permalink
  7. It’s the best time to make some plans for the future and it’s time to be happy. I’ve read this post and if I could I desire to suggest you few interesting things or suggestions. Maybe you could write next articles referring to this article. I wish to read even more things about it!

    Posted on 28-May-12 at 3:17 am | Permalink

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*