AutoComplete TextBox using JQuery in SharePoint 2010 with SPList values

Hi All, 

In my previous post here, I have discussed to get AutoComplete TextBox using Jquery, where I have set an array of keywords to source. 

In this post, I get the values for the source from a SharePoint2010 lists. Refer my previous post here for basic details and complete code. Here I just posted new part of the code only.

To achieve this, we have to use SPServices. Get the script from below link:

jquery.SPServices-0.6.2.min.js

Refer this script in your solution.

Instead of assigning array of keywords, call the method GetListItems(). Refer the below code snippet:

var availableTags = GetListItems();

Add the below function inside the wireEvents() function

///function to get list items using spservice

          function GetListItems()

          {

              var name = new Array();

              var index = 0;

              $().SPServices

              ({

                  operation: "GetListItems",

                  async: false,

                  listName: "Keyword Master",

                  CAMLQuery: "<Query><OrderBy><FieldRef Name='Title' Ascending='True' /></OrderBy></Query>",

                  CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",

                  completefunc: function (xData, Status) {

                      $(xData.responseXML).find("z\\:row,row").each(function () {

                          name[index] = $(this).attr("ows_Title");

                          index++;

                      });

                  }

                               $("#tags").autocomplete({   // tags - ID of textbox control
                               source:name

              });

              return name;

          }

Output:

Done. here we get the values from SharePoint 2010 list.


Note : You should mention viewfields for the CAMLQuery, otherwise it looks only those fields which are available in default view.