SharePoint 2010: JQuery Autocomplete Textbox Containing List Items

Introduction

This article shows how to use the jQuery UI AutoComplete widget to consume a SharePoint Web Service (Lists.asmx) that is JSON Serialized. The point of this article was to use jQuery techniques to query a list via its web services and do something flashy. The Autocomplete widget is one of the widgets provided in the jQuery UI and provides suggestions while you type into the field. The jQuery UI is a free widget and interaction library built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

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 Web Part on my page to paste the following JavaScript into:

Code (Script)
 

<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<link href="/resources/demos/style.css" rel="stylesheet" />
 

<script type="text/javascript">

$(document).ready(function()

{     

 var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body> <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'><listName>Microsoft

employees</listName><viewFields><ViewFields><FieldRef Name='Employee' />

</ViewFields></viewFields> </GetListItems> </soapenv:Body> </soapenv:Envelope>";

       //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: "http://SvrName:7070/_vti_bin/lists.asmx",

type: "POST",

dataType: "xml",

data: soapEnv,

contentType: "text/xml; charset=\"utf-8\"",

success: function( xmlResponse )         {

var domElementArray=$( "z\\:row", xmlResponse );

   var dataMap = domElementArray.map(function()

   {    

   return {

   value: $(this).attr('ows_Employee') ,

   id: $(this).attr('ows_Employee')

   };

   }); 

            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)   

           $( "#tags" ).autocomplete(   

            {

                 source: data 

            });

            }    

            });//.ajax  

                        });//docReady

</script>

<div class="ui-widget">

    <label for="tags">

        Microsoft employees</label>

    <input id="tags">

</div>

This could easily be additional page head stuff or master page stuff or in 2010 a custom action for a script and so on, but here it’s a CEWP. 

Some of the prerequisites for using jQuery UI Autocomplete are:

• jQuery Library - Can be downloaded from the Content Delivery Network (CDN):http://code.jquery.com/jquery-1.9.1.js or provide the link directly.
• jQuery UI Library - Can be downloaded from the Content Delivery (CDN): http://code.jquery.com/ui/1.10.4/jquery-ui.js or provide the link directly.
• jQuery UI CSS - Can be downloaded from the Content Delivery (CDN):http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css or provide the link directly.

An Autocomplete column would look like this:
Summary

This article has shown how to create a text box with an auto complete using the JQueryUI whenever jQuery is used.