Whether or not SharePoint actually needs an autocomplete for it’s search box could be debated, and the manner in which I’m about to implement it, well that could be debated also. 

The point of this post was to use jQuery techniques to query a list via its web services and do something flash.  I’m doing it SharePoint 2007 as that is what I have handy and working. 

I will be upfront and honest right now, the code for this is a Mashup from two sources, Jan Tielens and the jQueryUI demo itself, both needed tweaking to come up with something new, but just so you know it’s not been rocket science, hard work was done for me, cheers Jan. 

The example requires a Custom List called CommonTerms 

 

As you can see this is the kind of data that is searched for everyday in SharePoint (could I have accessed some kind of SharePoint API that returns real ones, sure but I knocked this up quickly). 

Then I created a Content Editor WebPart on my page to paste the javascript in.  This could easily be additional pagehead stuff or masterpage stuff or in 2010 a customaction for script etc, but here its a CEWP. 

The techniques are described in the javascript, I broke down the chains used by Jan and jQuery UI in an effort to explain what each particular bit does and make the code more readable.

Now just because I attached it to the search box doesn’t mean you have to, for instance I also attached this code on a SPD edited “NewForm.aspx” page, when the sharepoint controls are not enough an you don’t want to go to the trouble of custom field types and custom controls, here is a very quick hack.

Hope you find it useful.

<!-- 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


$(document).ready(function() {

    var soapEnv = " 
             
                  
                    CommonTerms 
                     
                         
                            
                        
                     
                 
             
        ";

    //Make a call to the List WebService using the SOAP envelope described above.
    //The URL is fixed to a Specific Site Root.  Feel free to change this
    //to your own fixed root or do some jscript voodoo to figure out where

    //Of course in 2010 you can do this with the Client Object Model, or hit
    //the list rest Service and return json, so enabling jsonp cross site calls.
    $.ajax({
        url: "/sites/20100928-04/_vti_bin/lists.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        contentType: "text/xml; charset="utf-8"",
        success:  function( xmlResponse )
        {
        	//xmlResponse contains an IXMLDOMDocument, you can see the raw xml soap response, if you query
        	//xmlRepsonse.xml.  But as this is a list and we want tis entries we use jQuery selector on it
        	//    	$( "z\:row", xmlResponse ) will return a jQuery array of IXMLDOMElements matching z:row tags
        	//   (the query "z\:row" means "z:row" remember that ":" means things in jQuery so it needs to be escaped)
        	//
        	//
        	var domElementArray=$( "z\:row", xmlResponse );

        	//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
		}

    });//.ajax

});//docReady

Advertisements