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
<strong>type: options.httpMethod,
contentType: options.contentType,</strong>
//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/GetData",
{
dataType: 'json',
<strong>httpMethod: 'POST',
contentType: 'application/json; charset=utf-8',</strong>
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 GetATCDataNoParam(string q, int limit)
{
DataTable dtSomething;
//connect to db, do your exception handling, etc
dtSomething = //your DAL or whatever you use
return GetJSONString(dtSomething); //use my method to parse the datatable into json
}
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.
adam.mokan 
Pingback: ASP.NET MVC Archived Blog Posts, Page 1
I also had to json encode the data like this:
data: JSON.stringify($.extend({q: lastWord(term),limit: options.max}, extraParams))
Micheal, what JSON library did you use ?
Kind regards
Gaston
minified the one here: http://www.json.org/json2.js
One more, how do you handle the “callback” parameter that is automatically added in the call to the WS?
Kind regards
Gaston
not sure what you mean exactly, but below is the code block that sets up my autocomplete.
$(document).ready(function() {
$(‘#’).autocomplete(”, {
httpMethod: ‘POST’,
contentType: ‘application/json; charset=utf-8’,
dataType: ‘json’,
mustMatch: false,
limit: 10,
minChars: 2,
parse: function(data) {
var rows = new Array();
for (var i = 0; i < data.d.length; i++) {
rows[i] = { data: data.d[i], value: data.d[i].Value, result: data.d[i].Value };
}
return rows;
},
formatItem: function(row, i, n) {
return row.Value;
},
extraParams: { companyTypeIdFilter: $('#’).val() }
});
$(‘#’).result(function(event, data, formatted) {
if (data) {
$(‘#’).val(data[“Key”]);
}
});
});
Side note: you can actually get .NET to do the JSON encoding in the response automatically like this:
[WebMethod]
[ScriptMethod(XmlSerializeString=false, ResponseFormat = ResponseFormat.Json)]
public KeyValuePair[] GetCompanyLookupInformation(string q, int limit, string companyTypeIdFilter)
{
return new CompanyManager().GetCompanies(q, limit, int.Parse(companyTypeIdFilter)).Select(x => new KeyValuePair ( x.CompanyId , x.Name)).ToArray();
}
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.