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.
- <script src="/_layouts/jQuery/jquery-1.8.3.min.js"></script>
- <script src="/_layouts/jQuery/jquery-ui-1.10.3.custom.min.js"></script>
- <script type="text/javascript" src="/_layouts/jQuery/jquery.SPServices-2013.01.min.js"></script>
- <link rel="stylesheet" type="text/css" href="/_layouts/jQuery/css/ui-lightness/jquery-ui-1.10.3.custom.min.css">
- <input id="autocomplete">
- <script language="ecmascript" type="text/ecmascript">
- $(document).ready(startScript);
- function startScript() {
- $().SPServices({
- operation: "GetGroupCollectionFromSite",
- async: true,
- completefunc: AttachAutoComplete,
- webURL: "/"
- });
- }
- function AttachAutoComplete(xmlResponse) {
- var domElementArray = $.makeArray(xmlResponse.responseXML.getElementsByTagName("Group"));
- var data = $.map(domElementArray , function(node) {
- return node.getAttribute("Name");
- });
- $( "#autocomplete" ).autocomplete({
- source: function( request, response ) {
- var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
- response( $.grep( data, function( item ) {
- return matcher.test( item );
- }) );
- }
- });
- }
- </script>
And here is the feature in action:
