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:
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:
!
SharePoint Dragons 