JQuery Autocomplete Textbox Containing List Items

Posted: August 15, 2014 in SharePoint2010

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)

<linkhref=”http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css”rel=”stylesheet”/&gt;

<scriptsrc=”http://code.jquery.com/jquery-1.9.1.js”></script&gt;

<scriptsrc=”http://code.jquery.com/ui/1.10.4/jquery-ui.js”></script&gt;

<linkhref=”/resources/demos/style.css”rel=”stylesheet”/>  

<scripttype=”text/javascript”>

$(document).ready(function()

{     

 var soapEnv = “<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’><soapenv:Body&gt; <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&#8221;,

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>

<divclass=”ui-widget”>

    <labelfor=”tags”>

        Microsoft employees</label>

    <inputid=”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:

An Autocomplete column would look like this:
SharePoint 2010 Jquery autocomplete textbox
Summary

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s