Implementing Autocomplete Textbox in SharePoint

Implementing Autocomplete TextBox in SharePoint

In my recent project activity, I got a requirement to fill the textbox with autocomplete functionality. After some research and struggle, I was able to achieve it.

The best thing about the solution I created is, it is cross browser compatible. I have tested it in Chrome and Internet Explorer.

What is autocomplete?

Autocomplete means when user starts typing the characters in a textbox, just below the textbox, user sees the suggestions. The best example is google search textbox. When you enter any text in the google search textbox, it starts showing you the suggestions of a thing you are looking for.

How to achieve it in SharePoint Visual Web Part?

To achieve it, you should use JQuery and SPServices in your SharePoint solution.

• In JQuery, there is an autocomplete functionality available. For more information, please refer to this link - http://jqueryui.com/autocomplete/.

• To know more about SPServices, refer to this link - http://spservices.codeplex.com/.  

The way to achieve it via JQuery and SPServices is:

Let’s say you have created a Visual Web Part in SharePoint and you have a textbox in your web part which you want to make as an autocomplete textbox. Now, this textbox should show the suggestions coming from your custom list named as “Items” and the column which it should target in your custom list is “ItemNumber”.

Just put below lines of code in your Visual Web Part’s “ascx” file, change the list name and the column name as per your need and you will be good to go:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        var itemSource = [];

        var k = 0;

        $().SPServices({

            operation: "GetListItems",

            async: false,

            listName: "Items",

            CAMLViewFields: '',

            CAMLQuery: '',

            completefunc: function (xData, Status) {

                $(xData.responseXML).SPFilterNode("z:row").each(function () {

                    itemSource[k] = $(this).attr('ows_ItemNumber');

                    k = k + 1;

                });

                $('#<%=txtAutoComplete.ClientID%>').autocomplete({

                    source: itemSource,

                    minLength: 0

                });

            }

        });

    });

</script>

<asp:TextBox ID="txtAutoComplete" runat="server"></asp:TextBox>

So what we have done here is:

Have given reference to the:

͐   JQuery UI js file

͐   JQuery js file

͐   Autocomplete js file

͐   SPServices js file

Have used JQuery variable as “itemSource” as an array to store the column values we will get from the custom list

Have used JQuery variable as “k” to keep the track of current item index

Under “SPService” function have used:

͐   Operation as “GetListItems” as we want list items from the list

͐   Kept async as false

͐   Used listName as “Items” and column name as “ItemNumber”

͐   Defined CAMLViewFields and CAMLQuery

Once the parameters provided above matches and gets validated, the “completeFunc” will be executed which will:

͐   Go through the “z:row” as it will hold the values returned by the SPService

͐   Add the provided column name to the array

͐   Index value will be increased by 1

Once “completeFunc” gets executed, the textbox will be used to bind the data to its datasource which we have in an array i.e. “itemSource”

Hope this helps!