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
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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s