Recently I had to create an autocomplete textbox that makes it easy to select users from the SharePoint user profiles. As a nice-to-have feature I planned to include a user photo in the autocomplete list. I fulfilled the requirements using SPServices and jQuery / Autocomplete UI widget of jQuery UI and the SharePoint Search web service.
In the sample application I used a Content Editor Web Part (CEWP) to inject my code and the necessary HTML elements.
The HTML elements are a text box (autoCompleteUsers) that “hosts” the Autocomplete widget, a button (startQuery) that invokes the query based on the text entered / item selected in the autocomplete text box, and a div (transformResult) that display the search results.
UserSearch.css is our custom stylesheet to restrict and unify the image size in the autocomplete list and in the result view.
I declared the keyword query text as defined below. The query is limited to the People scope.
Note: We should use the standard SharePoint Search and not the FAST Search in this example.
And further helper functions to perform XSL transformations:
Note: Yes, I know there are XSLT plugins for jQuery out there, however I found they do not support all of the features I required, like reading XML / XSL both from a string and from a URL path. In our case we have to parse the XML from the response received from the web service. The XSL comes from our custom XSL files stored in a subfolder of 14\TEMPLATE\LAYOUTS.
The PeopleSearchResults.xsl is used to convert the XML response from the Search web service into a HTML table (see related screenshot at the bottom of this post):
We register our event handlers after the document loaded completely. On pressing Enter we submit the query by invoking the click method of the startQuery button. On pressing other keys we update the autocomplete list by calling the attachAutoComplete function.
When we receive the response from the Search web service for our request sent from the attachAutoComplete function, we process the response using XPath queries (getAutoCompleteData function) and display / refresh the autocomplete list using our custom HTML template (setAutoCompleteData function).
The queryUsers function calls the Search web service when the user clicks on the Search button (or presses Enter in the text box) and display the result in the transformResult div using the helper functions defined earlier.
The screenshots below illustrate the functionality.
The autocomplete list is updated as the user types the name.
Users can be selected from the list:
By clicking on the Search button, the list of the matching users are displayed.