Using Jquery UI Autocomplete to consume WCF Service

I had some problem when trying to use jQuery UI autocomplete to get the data from a WCF service, after browsing around i finally found a way to resolve it

In the jQueryUI autocomplete file:

  1. Change the code for jQuery UI autocomplete , by default it execute an ajax call with GET method, we need to change this to POST
  2. We need to change the default content type to “application/json”  or else there will be an exception when trying to access the WCF service
  3. The WCF service will try to deserialize the data that we sent and it expect the data that we sent is sent in JSON string format
    1. eq: {‘term’:’human’} and not ‘term=human’ to do this we can use JSON.stringify method that we can get from http://www.json.org/js.html
In the WCF service file:

We need to decorate  our method with this attribute

[WebInvoke(Method = "POST", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.WrappedRequest)]

The javascript code

$('#<%= txtTitle.ClientID %>').autocomplete({ source: "/WebPages/Transaction/WebServices/TransactionService.svc/SearchPayeeByName" });

The jQuery UI that i use is version v1.8.14

Advertisements

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