Geeks With Blogs

@apopovsky
  • apopovsky @infobiker parece que sacaron mal los promedios, la vuelta era de 25.3km. no de 29 como estaba previsto. about 589 days ago
  • apopovsky RT “@ChaseMit: Just want to point out the NRA's plan to stop school shootings is literally the plot of Kindergarten Cop.”" about 667 days ago
  • apopovsky Aparte del paro del subte ahora tenemos lluvia por tiempo indeterminado about 796 days ago
  • apopovsky Hoy en bici a la oficina, me ahorre 15 minutos. Vamos a ver que tal la vuelta. Me sumé al mejor en bici. about 823 days ago

News Locations of visitors to this page
Ariel Popovsky's Blog Aventuras y desventuras con .net

I was trying to implement a simple autocomplete behavior on a textbox using JQuery and the JQuery Autocomplete plugin but it wasn’t as simple as I expected. The basic idea was to get the options from a WCF web service as the user typed. The first obstacle was preparing the Service to accept the calls from the plugin. The plugin accepts a url as the data source and invokes it with two parameters (and a timestamp), q is the query and limit the maximum number of results to return, so I created the following method using some tips from Rick Strahl's weblog:

  1: 	[OperationContract]
  2: 	[WebInvoke(Method = "GET", BodyStyle = WebMessageBodyStyle.WrappedRequest, 
  3: 		ResponseFormat = WebMessageFormat.Json)]
  4: 	public string[] GetOptions(string q, int limit)
  5: 	{
  6: 	     return new[]{"xxxx", "yyyy", "zzzz"};
  7: 	}

 

The service can now be invoked using the url: DataService.svc/GetOption?q=query&limit=10.

Setting up the autocomplete plugin is very straight forward:

  1: 	$(function(){
  2: 		$(".texbox").autocomplete("/Services/DataService.svc/GetOptions");
  3: 	});

 

The only problem was that I saw only one result, even when the JSON data had all of them. After some research I found out the problem was the parsing function used by the plugin. It doesn’t expects the kind of data the service returns, specially because the MS JSon serializer wraps up the JSON result in a “d” element (more about this here).

It’s not documented in the plugin options but as some others noticed you can provide your own parse function (I found out the hard way, reading the source). So I did (you also need to set the dataType to “json”:

   1:  $(function(){
   2:      $(".texbox").autocomplete("/Services/DataService.svc/GetOptions", {
   3:          dataType: 'json',
   4:          parse: function(data) {
   5:              var items = data.d;
   6:              var parsed=[];
   7:              for(var i=0;i<items.length;i++)
   8:                   parsed[i] = {
   9:                      data: [items[i]],
  10:                      value: items[i],
  11:                      result: [items[i]]
  12:                  }; 
  13:              return parsed;
  14:          }
  15:      });
  16:  });

 

This got my autocomplete behavior going.

Etiquetas de Technorati: ,,,
Posted on Tuesday, June 16, 2009 9:19 PM | Back to top


Comments on this post: JQuery Autocomplete with WCF services

# re: JQuery Autocomplete with WCF services
Requesting Gravatar...
I found this very helpful in one of my projects. Thanks a lot for publishing this.
Left by Sanjeev on Sep 29, 2009 2:16 PM

# re: JQuery Autocomplete with WCF services
Requesting Gravatar...
is it possible to email complete solution.
Left by Abdul on Nov 29, 2010 3:13 PM

# re: JQuery Autocomplete with WCF services
Requesting Gravatar...
WOW, thanks man.
very useful article. . .
>-:)-<
Left by Soren on Dec 11, 2010 9:07 AM

# re: JQuery Autocomplete with WCF services
Requesting Gravatar...
great, can u plz mail me the sample working solution
Left by Amir on Mar 09, 2011 3:40 AM

# re: JQuery Autocomplete with WCF services
Requesting Gravatar...
I like it, did you use the latest version of Jquery for this sample? (jquery-1.5.1.js)

it would be great if you can email me a working sample, or provide a download link.
Left by Ronnie Peretz on Mar 29, 2011 12:56 PM

# re: JQuery Autocomplete with WCF services
Requesting Gravatar...
For those asking for the solution, I can't send it or post it, it's part of a client project. I'll try to make a standalone sample but it depends on how much free time I got.
Left by Ariel Popovsky on Mar 29, 2011 2:42 PM

# re: JQuery Autocomplete with WCF services
Requesting Gravatar...
I'd also very much appreciate a full working sample.
Left by Kevin on Jun 07, 2011 8:34 PM

Your comment:
 (will show your gravatar)
 


Copyright © Ariel Popovsky | Powered by: GeeksWithBlogs.net | Join free