EnjoySharePoint YouTube Channel

Fields Autocomplete for SharePoint 2010 using jQuery SPServices

Fields Autocomplete for SharePoint 2010 using jQuery SPServices

In this post, we will discuss an easy way to implement an autocomplete column for a SharePoint list using SPService and jQuery. The SPAutocomplete lets you provide values for a Single line of text column from values in a SharePoint list. The function is highly configurable and can enhance the user experience with forms. To use this function you have to put it on a new item form. On one of the fields of this new item form, the SPAutoComplete can be implemented and used.

Get Office 365 Enterprise E3 Or Business Premium Subscription & Try out all the features

To make this work, create a new blank web part page. Open the page in SharePoint Designer and insert a data view on the page. At the Data Source Library select the list you want to create a new item form for and select Show Data. Select the desired fields to show on the new item form and select Insert Selected Fields as … New Item Form.

Example:
I have a list called Microsoft employees with a Title column with the name of the employees. In another list, I need these names also but I want to suggest the user who adds a new item which employees we already have and how these are spelled.

Follow below steps:



Edit the page in the browser and add a Content Editor Web part, modify the web part and show the Source Editor to add below code some code.

<script language=”javascript” src=”/JS/jquery-1.6.2.min.js” type=”text/javascript”></script><script language=”javascript” src=”/JS/jquery.SPServices-0.7.2.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$().SPServices.SPAutocomplete({
sourceList: “Microsoft employees”,
sourceColumn: “Employee”,
columnName:”Employee”,
ignoreCase: true,
numChars: 2,
slideDownSpeed: ‘fast’
});
});</script>

For all available options to set please take a look at the below link, but for the important ones here.
http://spservices.codeplex.com/wikipage?title=%24%28%29.SPServices.SPAutocomplete

sourceList: the list to get the suggestions from
sourceColumn: the static column name to get the suggestions from
columnName: the displayname of the field in the new item form

The result will come like below:

Fields Autocomplete for SharePoint 2010 using jQuery SPServices
Fields Autocomplete for SharePoint 2010 using jQuery SPServices

You may like following SPServices SharePoint 2010/2013 tutorials:

Hope this SharePoint SPServices tutorial explains how to fields autocomplete for SharePoint 2010 using jQuery and SPServices.

Check out Best Alternative to InfoPath -> Try Now
You May Also like the Following SharePoint 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 →