.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> SharePoint >> Post New Resource Bookmark and Share   

 Subscribe to Articles

SharePoint 2010: JQuery Autocomplete Textbox Containing List Items

Posted By:Sagar Pardeshi       Posted Date: February 05, 2014    Points: 200    Category: SharePoint    URL: http://www.dotnetspark.com  

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:

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.


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend