SharePoint Dragons

Nikander & Margriet on SharePoint

Building a jQuery Autocomplete textbox using the SharePoint REST API

So the first problem we had was to come up with a title that about sums up all the technologies and tools we’ll be using in this blog post, mainly being jQuery, jQuery UI, the SharePoint REST API and Fiddler, and make it sound spiffy as well. After abandoning that idea, we just used this title instead.

In this blog post we’re creating an autocomplete textbox that provides hints stored in a SharePoint list. The SharePoint RESTful interface is an ideal candidate to aid in this quest because jQuery makes it really easy to issue REST requests and also handles the JSON responses that the SharePoint REST API can provide really well. If you need to read up on REST we can totally recommend http://www.loisandclark.eu/Pages/rest.aspx, an article written by two very talented authors.

Because the jQuery Autocomplete widget works well with JavaScript objects containing a label and value property (or in fact, the name of the first property, label, doesn’t seem to matter, but the casing of the value property is important) we’ve decided to create a custom SharePoint list containing a Title, label and value column. We’ve called our list MyList. If you do the same you’ll be able to follow the rest of the example. Also, make sure to fill the list with some test data such as: aaa, aarde, and aardvarken.

The Autocomplete widget will show information while the user types, so we need a way to filter a specific column based on a search term. REST makes this pretty easy, although you have to be really careful when it comes to casing. For instance, if we want a list of all list items that have a value that starts with a in the Value column, all we need to do is issue the following REST request:

http://moon/_vti_bin/listdata.svc/MyList?$filter=startswith(Value,’a’)

By default, the response is XML. For our purposes, we’re more interested in JSON. If you want to work with REST and JSON it’s absolutely essential to install a tool on your dev environment that’s able to capture HTTP traffic. Here, we’ll use Fiddler (http://www.fiddler2.com/fiddler2/).

Once you start it up, it starts capturing HTTP traffic immediately (toggle between stopping and starting capturing traffic by pressing F12). Now do the following:

  • Issue the REST request: http://moon/_vti_bin/listdata.svc/MyList?$filter=startswith(Value,’a’) . Of course, you may have to change names. If you didn’t think of that yourself, don’t worry, you’ll never be able to complete the entire blog post Winking smile!
  • Press F12.
  • Locate the request in Fiddler. Right-click it and choose Unlock for Editing.
  • Press the Headers tab.
  • Find the Client section and notice that it says: Accept: */*.
  • Right-click the Accept line and choose Edit Header…. Change the value to application/json. This forces the response to be in JSON format.
  • image

  • Press F12 again so that Fiddler starts capturing web traffic again.
  • Right-click the modified request > Replay > Reissue Requests.
  • Locate the new request and inspect the body of the response by clicking JSON:
    image

This will teach you important stuff about the structure of the JSON response, which comes in handy once you need to process the information (and if you want to understand the jQuery code that’s coming up). If you remember that the autocomplete widget expects a collection of objects containing label and value properties, the following code should be understandable:

<html>
<head>
<script type=”text/javascript” src=”jquery-1.7.js”></script>
<script type=”text/javascript” src=”jquery-ui-1.8.custom.min.js”></script>
<script>
$(document).ready(function () {
  $(“input#autobox”).autocomplete({
  source: function (request, response) {
  var term = request.term;
  var restUrl = “http://moon/_vti_bin/listdata.svc/MyList?$filter=startswith(Value, ‘” + term + “‘)”;

  $.getJSON(restUrl, function (data) {
  var items = [];
  $.each(data.d.results, function (key, val) {                         
    var item = {
      label: val.Label,
      value: val.Value
      };

      items.push(item);
      });

      response(items);
      });

    }
  });
});

</script>

</head>
<body>

jQuery test page

<input type=”text” id=”autobox” />
 
</body>
</html>

This clearly demonstrates the power of jQuery as it accomplishes quite a lot in so little code. The end result is pretty:

image image image
About these ads

2 responses to “Building a jQuery Autocomplete textbox using the SharePoint REST API

  1. Pingback: SharePoint Online: Uso de la API REST (I)! - Blog del CIIN

  2. Pingback: ¡Uso de la API REST en SharePoint Online (I)! - Blog técnico de Office 365 - Office 365 - Español - Microsoft Office 365 Community

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

Follow

Get every new post delivered to your Inbox.

Join 378 other followers

%d bloggers like this: