Fields Autocomplete for SharePoint 2010 using jQuery SPServices

Fields Autocomplete for SharePoint 2010 using jQuery SPServices
InfoPath alternatives for form designing SharePoint

In this post we will discuss about an an easy way to implement an autocomplete column for a SharePoint list using SPService. 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.

To make this work, create a new blank webpart page. Open the page in SharePoint Designer and insert a dataview 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.

Read some SharePoint tutorials

SharePoint Designer 2016 Download and Updates

Dropdown list with multiple selection option in SharePoint 2010

SP.UI.ModalDialog.showModalDialog() do not work in SharePoint 2013

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

Hope this article will be helpful.


You May Also like the Following SharePoint Online 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