{"id":655,"date":"2010-08-21T14:30:52","date_gmt":"2010-08-21T12:30:52","guid":{"rendered":"http:\/\/www.itidea.nl\/?p=655"},"modified":"2015-09-08T20:31:10","modified_gmt":"2015-09-08T18:31:10","slug":"jquery-spservices-and-autocomplete","status":"publish","type":"post","link":"https:\/\/www.itidea.nl\/index.php\/jquery-spservices-and-autocomplete\/","title":{"rendered":"jQuery SPServices and autocomplete"},"content":{"rendered":"

On Codeplex the SPServices library\u00a0is available. This is a jQuery library for SharePoint Web Services.
\nOne of the functions available in the library is the SPAutoComplete:
\nhttp:\/\/spservices.codeplex.com\/wikipage?title=%24%28%29.SPServices.SPAutocomplete<\/a>\u00a0\u00a0<\/p>\n

The SPAutocomplete lets you provide values for a Single line of text column from values in a SharePoint list. The function is highly configurable and can enhance the user experience with forms.\u00a0\u00a0<\/p>\n

To use this function you have to put it on a new item form. On one of the fields of this new item form the SPAutoComplete can be implemented and used.\u00a0\u00a0<\/p>\n

To make this work, create a new blank webpart page. Open the page in SharePoint Designer and insert a dataview on the page. At the Data Source Library select the list you want to create a new item form for and select Show Data. Select the desired fields to show on the new item form and select Insert Selected Fields as … New Item Form. Save the page and edit the page in the browser.\u00a0\u00a0<\/p>\n

Imagine:
\nI have a list called Customers with a Title column with the name of the customer. In another list I need these names also but I want to suggest the user who adds a new item which customers we already have and how these are spelled.\u00a0\u00a0<\/p>\n

Let’s proceed.
\nEdit the page in the browser and add a Content Editor Webpart, modify the webpart and show the Source Editor to add some code.<\/p>\n

\r\n<script type="text\/javascript" src="..\/ICTLibrary\/jquery-1.4.2.min.js"><\/script>\r\n<script type="text\/javascript" src="..\/ICTLibrary\/jquery.SPServices-0.5.4.min.js"><\/script>\r\n\u00a0\r\n\r\n<script type="text\/javascript">\r\n\u00a0\u00a0\u00a0 $(document).ready(function() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $().SPServices.SPAutocomplete({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 sourceList: "Customers",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 sourceColumn: "Title",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 columnName: "CustomerName",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 numChars: 2,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ignoreCase: true,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 slideDownSpeed: 100,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0debug: true\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0 });\r\n<\/script>\r\n<\/pre>\n
For all available options to set please take a look at the link provided earlier, but for the important ones here.
\nsourceList: the list to get the suggestions from
\nsourceColumn: the static column name to get the suggestions from
\ncolumnName: the displayname of the field in the new item form
\nYou can hide the content editor webpart so you only see the new item form. Go ahead and type the first letters of a customername.
\n\"\"<\/a><\/p>\n
Ofcourse you want to use the autocomplete function on other pages or in other webparts and not only on a new item form.
\nFor this purpose you can use the jQuery UI plugin (http:\/\/docs.jquery.com\/UI\/Autocomplete<\/a>, implemented in release 1.8) in combination with the SPServices library.
\nWith the SPServices library the items can be pulled out of the desired list and column and with the auto complete function of the jQuery UI the source can be set to the values to show.
\nTo get the desired data from the list:<\/p>\n
\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $().SPServices({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 operation: "GetListItems",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 async: false,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 listName: "Customers",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 CAMLViewFields: '<ViewFields><FieldRef\/><\/ViewFields>',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 CAMLQuery: '<Query><OrderBy><FieldRef Name=\\'Title\\' Ascending=\\'True\\' \/><\/OrderBy><\/Query>',\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 completefunc: function(xData, Status) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(xData.responseXML).find("[nodeName= z:row]").each(function() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 itemSource[k] = $(this).attr('ows_Title');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 k = k + 1;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n<\/pre>\n
\u00a0\u00a0<\/p>\n
And use the gathered data in the input field at the page:<\/p>\n
\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $("input#autocompletebox").autocomplete({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 source: itemSource,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 minLength: 2\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n<\/pre>\n
Where \u2018autocompletebox\u2019 is the id of the input control:<\/p>\n
\r\n<input id="autocompletebox" \/>\r\n<\/pre>\n
\u00a0\u00a0<\/p>\n
And the output of this all in the browser:<\/p>\n
\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
On Codeplex the SPServices library\u00a0is available. This is a jQuery library for SharePoint Web Services. One of the functions available in the library is the SPAutoComplete: http:\/\/spservices.codeplex.com\/wikipage?title=%24%28%29.SPServices.SPAutocomplete\u00a0\u00a0 The SPAutocomplete lets you provide values for a Single line of text column … Read More »<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,8],"tags":[11,13,42,15,21,33],"class_list":["post-655","post","type-post","status-publish","format-standard","hentry","category-sharepoint-2007","category-sharepoint-2010","tag-jquery","tag-moss-2007","tag-sharepoint-2010","tag-sharepoint-designer-2007","tag-sharepoint-designer-2010","tag-spservices"],"_links":{"self":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/655","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/comments?post=655"}],"version-history":[{"count":12,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/655\/revisions"}],"predecessor-version":[{"id":744,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/655\/revisions\/744"}],"wp:attachment":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/media?parent=655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/categories?post=655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/tags?post=655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}