juin 30 2011

[SharePoint 2010] Autocomplete avec jQuery et ADO.NET Data Services REST

Category: Javascript | SharePoint 2010Nicolas Esprit @ 17:16

Dans un projet SharePoint 2010, plus précisément dans une Application Page, j'ai voulu implémenter la fonctionnalité d'autocompletion pour un champ de saisie. L'utilisateur devant choisir un nom d'utilisateur. Pour ce faire il existe plusieurs solutions, entre autres :

  • La bonne vieille méthode : AjaxControl Toolkit + un Web Service .asmx
  • Du javascript avec utilisation de l'API Cliente SharePoint
  • Un peu de jQuery UI + un Web Service.asmx
  • etc...

Mais j'ai voulu m'amuser un peu en utilisant les Web Services RESTful offerts depuis la version 2010 de SharePoint. Et plus précisément faire appel à http://ServeurMoss/_vti_bin/listdata.svc. Pour l'autocompletion jQuery UI suffit amplement.

Voici ce que cela donne :

<div id="NewUsers">
<p><b>Add new user :</b></p>
<input type='hidden' id="txtUserSelectedValue"/>
<input type="text" id="txtUser" class="autosuggestUser" />
<button id="btn_addUser" type="button" class="fg-button ui-state-default ui-corner-all">Add</button>
</div>

Et au niveau de jQuery :

$("#txtUser").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://ServeurMoss/_vti_bin/ListData.svc/UserInformationList?$filter=(ContentType eq 'Person') and (substringof('" + $("#txtUser").val() + "',Name))",
dataType: "json",
type: "GET",
contentType: "application/json",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d.results, function (item) {
return {
label: item.Name + ' (' + item.Account + ')',
id: item.Id
}
}));
},
error: function (XMLHttpRequest, callStatus, errorThrown) {
alert(callStatus);
}
});
},
minLength: 2,
select: function (event, ui) {
$("#txtUserSelectedValue").val(ui.item.id);
}
});

 

Voici le résultat obtenu :

Lors de la sélection d'un user dans la liste, son ID est stocké dans le hidden field. Rien d'extraordinaire, mais si ça peut vous faire gagner du temps... Hope this help !

Tags: , , , ,

Les commentaires sont clos