Using SPServices to provide data to autocomplete field on Nintex

Environment:

SharePoint Server 2010, Nintex Form 2010, SPServices 2013.01

Problem:

In one of our Nintex form, we need to allow people to search for items that are stored on another list and set the search result to be the input field’s value.

Narrative:

Initially, I found a method called $().SPServices.SPAutocomplete from the SPServices site . In their SP2007 demo site, it worked perfectly on a normal form. So I copied the code to my Nintex form and it threw a error saying “Column is not an input control or is not found on page”. I searched that error message and found this article which had the same error. After reading it, I realise that Nintex form might have changed the control id therefore, the script couldn’t find it. The code posted by hilary86 worked the trick.

Result:

This is the screenshot of my final result. When user start typing in the JournalTitle input field, items that contains the typed in words will show in the dropdown.

To delete

How to make it happen:

  1. The items showed in the autocomplete dropdown list are stored in another SharePoint list. So first of all, we need to create a SharePoint list and add a few items to the list. I called it “Journals”.
  2. Download the SPServices file from http://spservices.codeplex.com/, unzip it.
  3. Open the jquery.SPServices-VersionNumber.min.js  file and search for “(jQuery)”. It should be in the last line of the file. Replace it with “(NWF$)”. Save the file.
  4. Upload it to the site collection’s Style Library.
  5. Create another js file in the Style Library, my one called NF_AutoComplete.js
  6. Type the following code to the NF_AutoComplete.js
    NWF$(document).ready(function() {   
       //The source data for the autocomplete is the Journals list  
       //Store the journal titles in a array variable  
       var externalParties = [];     
       NWF$().SPServices({      
          operation: "GetListItems",      
          async: false,      
          listName: "Journals",      
          CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",   //the name needs to be changed accordingly   
          completefunc: function (xData, Status) {        
             NWF$(xData.responseXML).SPFilterNode("z:row").each(function() {          
                externalParties.push(NWF$(this).attr("ows_Title"));        
             });      
          }    
       });        
       //journalinput is added on the control in the NF  
       NWF$("#" + journalinput).autocomplete({      
          source: externalParties  
       });
    });
  7. Go to the Nintex Form. In the ribbon, navigate to the form’s Settings. Expand the Advanced section, add the URLs of the  jquery.SPServices-VersionNumber.min.js  and NF_AutoComplete.js to the Custom JavaScript Includes box. Save it.
  8. Click on the input box control which will display the autocomplete and click Control Settings from the ribbon.
  9. Expande the Advanced section, change the Store Client ID in JavaScript variable value to Yes. Enter the id used in the code in Step 6. So for me, it was journalinput. Save it.
  10. Make sure you publish the form.
  11. That’s it. There are some other options can be added to the autocomplete, change to suit your needs.

References:

A big thanks to Marc Anderson and the team who developed SPServices!!