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.

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.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>