Marc Anderson was good enough to comment on my last post, a demo of creating a jQuery extension to the SharePoint search box to suggest Common Terms.

Marc’s comment was related to a compatability problem with safari and chrome when using the “z\:row” syntax as a selector, also to remind me of the SPServices library which makes calling sharepoints web services a little easier.

So just for him (well everyone really) here is the same example re-worked to use the SPServices library (stored locally in a Doc Library for this code).

Note again I have stripped the code out, unchained the jQuery and commented what the lines are doing as not everyone knows the extent of jQuery (myself included).

To use this code

    1. Create a Site Collection

    2. Create a List called CommonTerms in the rootweb

    3. Add the SPServices library to a doc library

    4. Add a CEWP to the page and edit it in Source Mode

    5. Paste the Code (properly formatted, cut and paste from here can cause problems)

    6. Edit the SPServices library script path to point at your Site Collection.

So here you go

<!-- How you store the libraries is up to you but for the purpose of this demo I just links straight to google CDN -->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js
/sites/20100928-04/docs/jquery.SPServices-0.5.8.min.js


$(document).ready(function() {

    $().SPServices({
        operation: "GetListItems",
        async: true,
        listName: "CommonTerms",
        CAMLViewFields: "",
        completefunc: AttachAutoComplete
    });
});//docReady

function AttachAutoComplete(xmlResponse)
{

    //xmlResponse contains an Object that contains an IXMLDOMDocument2,
    // you can see the raw xml soap response, if you query xmlResponse.responseXML.
    // As this is a list and we want its entries we use jQuery selector on it
    //    	$( "[nodeName=z:row]", xmlResponse.responseXML ) will return a jQuery
    // array of IXMLDOMElements matching "z:row" tags
    //
    var domElementArray=$( "[nodeName=z:row]", xmlResponse.responseXML );

    //The map function is a technique for processing one array and returning another
    //jQuery array, in this case we are returning an array of jscript objects that map to attributes
    //of the XML entries.
    //see http://api.jquery.com/jQuery.map/
    var dataMap = domElementArray.map(function()
        {
	        return {
		        value: $(this).attr('ows_Title') ,
		        id: $(this).attr('ows_Title')
	        };
        });

    //In this case the autocomplete function cannot handle jQuery arrays it want POJ arrays in a specific format.
    //By using the get() function we return the internals of the jQuery array the core objects
    //see http://api.jquery.com/get/
    var data = dataMap.get();

    //Find the Sharepoint Portal Search Box (this is a poor selector, but it is not properly named by sharepoint, well it is but INamingContainer getrs in the way)
    $("input.ms-sbplain").autocomplete(
    {
        source: data
    });//autocomplete

}
Advertisements