Auto-Suggest Column in SharePoint 2010 using SPServices

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

    Add item in source list namely Department
     
  2. Open your second list ie. target list Autosuggest in SharePoint designer and add fallowing code on NewForm.aspx page
    under <script> tag
    1. <script src="../../jquery/1.6.2/jquery.min.js" type="text/javascript"></script>  
    2. <script src="../../Js/jquery.SPServices-0.7.2.js" type="text/javascript"></script>  
    3. <script src="../../Js/jquery.SPServices-0.7.2.min.js" type="text/javascript"></script>  
    4.   
    5. <script type="text/javascript">  
    6. $(document).ready(function() {  
    7.     $().SPServices.SPAutocomplete({  
    8.         sourceList: "Department",   
    9.         sourceColumn: "Title",  
    10.         columnName:"Department",  
    11.         ignoreCase: true,  
    12.         numChars: 2,  
    13.         slideDownSpeed: 'fast'  
    14.     });  
    15. });  
    16. </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
     
    New Item