Auto-Suggest Column in SharePoint 2010 using SPServices

This blog explains how to make list column or list field auto suggestible while entering data in list field.

Introduction

This blog explains how to make list column or list field auto suggestible while entering data in list field.

Procedure

1. Create two list one is source list and other is target list.
   
   e.g.: I have two lists namely source list:Department and target list: Autosuggest
   
   
    
2. Open your second list ie. target list Autosuggest in SharePoint designer and add fallowing code on NewForm.aspx page
   under <script> tag
   

   <script src="../../jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
   <script src="../../Js/jquery.SPServices-0.7.2.js" type="text/javascript"></script>
   <script src="../../Js/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>
   
   <script type="text/javascript">
   $(document).ready(function() {
       $().SPServices.SPAutocomplete({
           sourceList: "Department",
           sourceColumn: "Title",
           columnName:"Department",
           ignoreCase: true,
           numChars: 2,
           slideDownSpeed: 'fast'
       });
   });
   </script>

   Note:
   
   sourceList
   
   The name or GUID of the list which contains the available values. If you choose to use the GUID, it should look like: "{E73FEA09-CF8F-4B30-88C7-6FA996EE1706}". Note also that if you use the GUID, you do not need to specify the WebURL if the list is in another site.
   
   sourceColumn
   
   The StaticName of the source column in source List
   
   columnName
   
   The DisplayName of the column in the form or you can target list column name where you want to apply auto suggestion.
    
3. Save NewForm.aspx page and go to your site and see the effect, your auto suggest column will be working fine as below figure