SharePoint 2010 How to create an autocompleting column

There are many nice features available for SharePoint 2010. Some are easy to implement, some are more complex. I would like to provide you an easy way to implement an autocomplete column for a SharePoint list.

You have to write some lines – no, let me correct this: you have to copy and paste some code, do your small changes and you have to download some .js files and include them in a document library.

So what we would like to have? Imagine you make your project management in your sharepoint. So you have a list with projects, for example. In this list you track your projects, the customer, the milestones and meeting dates, the status or just some simple things. The column customer is a lookup field to your list with customers. No problem if you have 20 or 30 customers. The dropdown will not be the best option, but it is manageable.

But what if your customer list grows to 100 or 300 customers? Well i wish you the best that it will be that size anytime. And if it is already became huge, than i would suggest you to use an autocompleting column. It would look like this:

If you start typing “Me” he automatically suggest all customers from list customer which is starting with “Me”. How can we achive this nice behaviour now?

Download this jQuery SPService Library from codeplex. There is a function called SPAutoComplete which we will use. And you have to download this file or a higher version: http://code.jquery.com/jquery-1.4.2.min.js.

Step 1: Preparations

Upload the files jquery-1.4.2.min.js and jquery.SPServices-0.5.8P1.min.js to a public document library in your SharePoint.

Now i created two lists. The first list “Customer” which contains the list of your customers and the second list for Projects. In the Project list i have a project title, a customer field (textfield), and a status.

Step 2: Create an new form to enter new list items in the project list

I open SharePoint Designer, go to my list and create a new form for new items. In this form i activate the advanced edit mode. Search for the placeholdermain and put after

<asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”>

this script:

<script type=”text/javascript” src=”../yourDocumentLibrary/jquery-1.6.2.min.js”></script>
<script type=”text/javascript” src=”../yourDocumentLibrary/jquery.SPServices-0.7.0.min.js”></script>

<script type=”text/javascript”>
$(document).ready(function() {
$().SPServices.SPAutocomplete({
sourceList: “Customer“,
sourceColumn: “Title“,
columnName: “Customer“,
numChars: 2,
ignoreCase: true,
slideDownSpeed: 100,
debug: true
});
});
</script>

I highlighted in red the points which you have to fit to your environment.

After that save your new form and set it as default standard. You are done. Check your new feature.

If you need some more resources, i recommend you to check google 🙂

..:: I LIKE SHAREPOINT ::..