Search This Blog

Thursday 31 May 2012

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:

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.

8 comments:

  1. Hey there, great post so far :) thanks! Could you perhaps tell me how to modify the result-function to update the listas someone types? So lets say i got List "events" with 100 entries, 20 of them starts with "party". So I add "party" to my autocomplete, it a) shows suggestions via REST and b) updates the targetted list to shuw just these 20 items?

    Would be so great to have this!

    Best regards,
    Dominik

    ReplyDelete
  2. Hi, thanks very much for posting this. Yours is the first example that has given me any joy!
    I am looking for a similar solution, except the search would NOT be on the title column, and the result returned would be two columns concatonated, eg:
    2 columns, txtSurname and txtFirstname
    Search on txtSurname
    TextBox fills with value "txtFirstname txtSurname"

    I've had a play with the code, but nothing I change seems to have any affect (except messing with the 'ows_Title' on the completefunc section...

    Any advice appreciated :)

    ReplyDelete
  3. Need your help..
    Not working for me.
    Can you provide us the entire code as a package ??

    ReplyDelete
  4. Its working fine with the static data. When trying this having error. There seem to be missing curly close bracket. I can't get it fixed, please update.
    Thanks

    ReplyDelete
  5. just add this close braces });
    below the index++;

    ReplyDelete
  6. it is working fine
    just add the close braces });
    below the
    index++;
    });
    }

    ReplyDelete
  7. hi Manikandan,
    I need this autocomplete functionality in one of my textbox inside a wizard control in Visual webpart, I tried the above script but it didn't work. can you please provide step by step process to do this, or could you please send me to my Mail: johnbura@gmail.com
    Please help its very urgent..
    Thanks in advance.

    ReplyDelete
  8. Its working fine now, after spending some time to fix it.
    Just add these close braces }) before this Line $("#tags").autocomplete({ // tags - ID of textbox control , hope it will work fine.

    ReplyDelete