SharePoint 2010 Jquery autocomplete textbox containing list items

SharePoint 2010 Jquery autocomplete textbox containing list items
InfoPath alternatives for form designing SharePoint

In this article we will discuss how to use the jQuery UI AutoComplete widget to consume an SharePoint Web Service (Lists.asmx) that is JSON Serialized. Here we will use jQuery techniques to query a list via its web services and do something flash. The Autocomplete widget is one of the widgets provided in jQuery UI and provides suggestions while you type into the field. 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.

If you want to learn SharePoint online then you can Download a FREE PDF on SharePoint online tutorial and Dropdown list with multiple selection option in SharePoint 2010 and SP.UI.ModalDialog.showModalDialog() do not work in SharePoint 2013.

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).

Here I have add a Content Editor Web Part on my page and paste below javascript code:



<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 script etc, but here it’s a CEWP.

Some of the prerequisites for using jQuery UI Autocomplete are:
– jQuery Library: Can be downloaded from CDN (Content Delivery Network: http://code.jquery.com/jquery-1.9.1.js) or one can give link directly.
– jQuery UI Library: Can be downloaded from CDN (Content Delivery http://code.jquery.com/ui/1.10.4/jquery-ui.js) or one can give link directly.
– jQuery UI CSS: Can be downloaded from CDN (Content Delivery http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css) or one can give link directly.

Autocomplete column. It would look like this:

SharePoint 2010 Jquery autocomplete textbox containing list items
SharePoint 2010 Jquery autocomplete textbox containing list items

Hope this article will be helpful.

Similar SharePoint 2013 Tutorials


About Sagar Pardeshi

I am Developer working on Microsoft Technologies for the past 6+years. I am very much passionate about programming and my core skills are SharePoint, ASP.NET & C#,Jquery,Javascript,REST. I am running this blog to share my experience & learning with the community I am an MCP, MCTS .NET & Sharepoint 2010, MCPD Sharepoint 2010, and MCSD HTML 5,Sharepoint 2013 Core Solutions. I am currently working on Sharepoint 2010, MOSS 2007, Sharepoint 2013,Sharepoint 2013 App Dev, C#, ASP.NET, and SQL Server 2008.

View all posts by Sagar Pardeshi →

Leave a Reply