Second Life of a Hungarian SharePoint Geek

August 22, 2013

Autocomplete textbox for site groups

Filed under: CEWP, jQuery, jQuery UI, SP 2010, SPServices — Tags: , , , , — Peter Holpar @ 22:44

Recently I had to provide a solution that supports selecting SharePoint site groups through an HTML autocomplete textbox.

The solution was built on JavaScript-based components, like jQuery (version 1.8.3), Autocomplete widget of jQuery UI (version 1.10.3) and jQuery Library SharePoint Web Services (aka SPServices, version 2013.01). The JavaScript code was injected into the page using the Content Editor Web Part (CEWP).

In the code (see below) we get the list of groups through the GetGroupCollectionFromSite method of the UserGroup web service, and attach the autocomplete feature to a HTML textbox, filtering the matching groups by a simple RegExp based on the text entered into the textbox.

  1. <script src="/_layouts/jQuery/jquery-1.8.3.min.js"></script>
  2. <script src="/_layouts/jQuery/jquery-ui-1.10.3.custom.min.js"></script>
  3. <script type="text/javascript" src="/_layouts/jQuery/jquery.SPServices-2013.01.min.js"></script>
  4. <link rel="stylesheet" type="text/css" href="/_layouts/jQuery/css/ui-lightness/jquery-ui-1.10.3.custom.min.css">
  5.  
  6. <input id="autocomplete">
  7.  
  8. <script language="ecmascript" type="text/ecmascript">
  9.  
  10. $(document).ready(startScript);
  11.  
  12. function startScript() {
  13.   $().SPServices({
  14.         operation: "GetGroupCollectionFromSite",
  15.         async: true,        
  16.         completefunc: AttachAutoComplete,
  17.     webURL: "/"
  18.     });
  19. }
  20.  
  21. function AttachAutoComplete(xmlResponse) {
  22.   var domElementArray = $.makeArray(xmlResponse.responseXML.getElementsByTagName("Group"));
  23.   var data = $.map(domElementArray , function(node) {
  24.         return node.getAttribute("Name");
  25.     });   
  26.  
  27.   $( "#autocomplete" ).autocomplete({
  28.     source: function( request, response ) {
  29.       var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
  30.       response( $.grep( data, function( item ) {
  31.         return matcher.test( item );
  32.       }) );
  33.     }
  34.   });     
  35. }
  36.  
  37. </script>

And here is the feature in action:

image

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

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

Blog at WordPress.com.

%d bloggers like this: