Monday, December 21, 2015

Auto complete feature in SharePoint 2013 list column using SPServices in SharePoint 2013

In this post we will discuss how we can achieve auto complete feature for a column in SharePoint 2013 list using jQuery and SPServices. Here I am have custom list name as "MyProjects" which has one column name as Title and it has data looks like below :


Then I have another list which has two columns one is the default Title column and other one column name is "MyProjectName". And I want the auto complete feature should display the values in the MyProjectName column from the above "MyProjectLists" list (Title column).

For this I have added the below piece of code in the SharePoint list new form in a script editor web part.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js" type="text/javascript"></script>
    <script type="text/javascript">
       
        $(document).ready(function ()
        {
                $().SPServices.SPAutocomplete({
                sourceList:"MyProjectsList",
                sourceColumn: "Title",
                columnName:"MyProjectName",
                ignoreCase: true,
                numChars: 1,
                slideDownSpeed: 'fast'
        });
    });
    </script>

Now if I will start typing something then the auto complete feature will display the related values.


No comments:

Post a Comment