SP Online (Form): Text Field with Autocomplete (Values from a SP List Column)


Badge +1

Hello Nintex Community!

Hopefully someone can help me out with this:

  1. Downloaded SPServices from http://spservices.codeplex.com/
  2. Modified the jquery.SPServices-2014.02.min.js (Changed "(jQuery)" to "(NWF$)")
  3. Uploaded the modified jquery.SPServices-2014.02.min.js with the SP Designer to the "Style Library"
  4. Set the Client ID JavaScript variable name of the Text Field to myCity
  5. Added the path to the jquery.SPServices-2014.02.min.js in Custom JavaScript Includes
  6. Added the following Code to Custom JavaScript

NWF$(document).ready(function() {

var itemSource = [];
var i = 0;

NWF$().SPServices({
  operation: "GetListItems",
  async: false,
  listName: "myCityList",
  CAMLViewFields: '<ViewFields><FieldRef/></ViewFields>',
  CAMLQuery: '<Query><OrderBy><FieldRef Name='City' Ascending='True' /></OrderBy></Query>',
  completefunc: function(xData, Status) {
   NWF$(xData.responseXML).find("[nodeName= z:row]").each(function() {
    itemSource = NWF$(this).attr('ows_City');
    i = i + 1;
   });
  }
});

NWF$("#" + myCity).autocomplete({     
   source: itemSource 
   });
});

The internal Field Name of the column City is City.

What am I missing?

Thanks in advance & kind regards,
Milan


7 replies

Userlevel 4
Badge +7

Hi Milan

I have used this previously and i have adapted the code i have used for your example.

var itemSource = [];

NWF$(document).ready(function () {

     NWF$().SPServices({

         operation: "GetListItems",

         async: true,

         listName: "myCityList",

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

         CAMLViewFields: '<ViewFields><FieldRef Name='City' /></ViewFields>',

         completefunc: function (xData, Status) {

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

                 itemSource.push(NWF$(this).attr("ows_City"));

             });

         }

     });

     NWF$("#" + myCity).autocomplete({

         source: itemSource

     });

});

I hope this helps, let me know how you get on implementing this.

Regards

Paul

Badge +1

Hi Paul,

thanks for your quick reply!

But it's still not working, did you use this code in a SP Online environment?

The jquery.SPServices-2014.02.min.js is loaded before the code is executed, but during debugging with IE it looks like this:

op_un.jpg

Regards

Badge +9

Milan Stojadinovic​ .Are you able to do autocomplete?

Badge +1

I did it this way - https://jqueryui.com/autocomplete/

Badge +9

Along with SPServies or CSOM/REST?

Badge +1

Without SPService, I used REST to get the Items.

Badge +16

Milan Stojadinovic‌ did you resolve this?  Are you able to mark any of the responses as correct?

Reply