While experimenting with the new jQuery UI’s Autocomplete plugin, I discovered that the I couldn’t use the url source feature with a WCF service out of the box as I expected. With a few changes you can get really close, but when WCF serialized the JSON response they wrap it in a container object with the name ‘d’. Luckily the Autocomplete plugin allows for three options when specifying a source. You can specify a javascript array, a string with a url that provides JSON, or a callback function which provides the a response parameter that you call with the filtered results. The final option, a callback, is the one we will use when calling a WCF Service. The simplest usage of the callback option (although rather usless) would be:
$('#Makes').autocomplete({
source: function(request, response) {
response(['test1', 'test2']);
}
});
WCF Service
In order to get this working though we first need a WebScript enabled WCF Service. To do so, you add a new WCF Service, we’ll call this on the AutomobileService.svc. First thing is the setup the service to use WebScriptServiceHostFactory, open the actual .svc file (right click, Open With, OK) and add a new attribute with the Factory.
<%@ ServiceHost Language="C#" Debug="true" Service="jQueryAutocompleteWithWcf.AutomobileService" CodeBehind="AutomobileService.svc.cs" Factory="System.ServiceModel.Activation.WebScriptServiceHostFactory" %>
Additionally, we want to add the WebGet attribute to the operations, which should have a single parameter for search ‘term’.
[OperationContract] [WebGet(ResponseFormat = WebMessageFormat.Json)] IEnumerable<string> GetMakes(string term);
Script and Markup
Now that we have our service setup its time to call the WCF service.
$('#Makes').autocomplete({
source: function (request, response) {
$.getJSON('AutomobileService.svc/GetMakes', request, function (data) {
response(data.d);
});
}
});
Notice the response is using the data.d property where ‘d’ is the WCF serialization container that caused us problems earlier. With a few extra lines you can add caching and aborting.
var makesCache = {}, makesXhr;
$('#Makes').autocomplete({
source: function (request, response) {
var term = request.term;
if (term in makesCache) {
response(makesCache[term]);
return;
}
if (makesXhr != null) {
makesXhr.abort();
}
makesXhr = $.getJSON('AutomobileService.svc/GetMakes', request, function (data, status, xhr) {
makesCache[term] = data.d;
if (xhr == makesXhr) {
response(data.d);
makesXhr = null;
}
});
}
});
I hope this code help someone out in the future, the source code has a fully functional demo and should have all the code you need to get the WCF service returning results to your autocomplete textbox. If you are interested in doing this with .NET 3.5 there are a few extra configuration items needed, leave a comment if you have any trouble and I’ll be happy to help out.
Download
The full source code is available for download from my website