Autocomplete in a repeating section


Badge +4

Hello all,

I have set autocomplete for a field in a Nintex Form 2013 using JS (that's a long list of Cost Centers for an expense approval form). The customer would like to be able to submit more that 1 expense in the same form so I tried utilizing a repeating section but unfortunately the autocomplete would only work on the original field and not on the "clones". I was naive to think all the settings of the original field would magically transfer over to the clones but it turns out to be technically much more complicated than that.

So, has anyone achived that already or can help achieve it now?

Thank you,

Dimiter


10 replies

Userlevel 5
Badge +14

once you make it working for one repeating section row, it should be possible to do it for all the rows.

any details how did you set it up for first row?

if there are some direct manipulations on DOM elemets you might need to reapply them for every new row being added.

have a look on NWF.FormFiller.Events.RegisterRepeaterRowAdded event which might be the best place to do that  

Badge +4

Hello Marian Hatala‌,

I used SPServices from Codeplex and the tutorial from this site:

Using SPServices to provide data to autocomplete field on Nintex | Drift Bottle 

That I found here in the community. Basically, you add 2 js files to Styles library and then point to them from Custom JavaScript Includes in the Form's Advanced Settings.

Userlevel 5
Badge +14

based on the link you provided, something like this should do the trick

(note I haven't tested it)

NWF.FormFiller.Events.RegisterRepeaterRowAdded(function (){
     var repeaterRow = NWF$(arguments[0][0]);
     repeaterRow.find('.AutocompleteControlClass').autocomplete({source: externalParties});
});
          

ie. for every new row added you have to attach/configure autocomplete handler to respective control.

to address the control you have to add a class to the control (AutocompleteControlClass) since javascript variable addresses just first   RS row.

note2: different types of controls might need a bit more specific selector. simple class selector should work for single line text control.


          
Badge

Hi Marian Hatala,

we've tried this and it works for the change of color in each new row in repeating section but Autocomplete function works only for the first row and we don't know why and Nintex Support cann't help. Do you have any idea what should help us.

function refreshAutocomplete() {
NWF$(".testcontrol").each(function(i, el) {

el = NWF$(el);

el.css("border","1px solid red");
el.autocomplete({
source: externalParties
});

});

}

refreshAutocomplete();
NWF.FormFiller.Events.RegisterRepeaterRowAdded (function () {
window.setTimeout(refreshAutocomplete, 1000);
          
Userlevel 5
Badge +14

Hi Dimiter Sotirov‌ and Ivan Krška‌,

so I've got time to look closer on this and following worked for me (tested just with single line text)

NWF.FormFiller.Events.RegisterRepeaterRowAdded(function (){
     var repeaterRow = NWF$(arguments[0][0]);
     repeaterRow.find('.AutocompleteControlClass input.nf-associated-control').autocomplete({source: externalParties});
});

‍‍‍‍‍

Badge +4

I'll give it a shot, but looks alright to me. Thank you!

Badge +5

I've just been helping somebody with this today, and thought I would offer my two penneth.

You actually need to apply the autocomplete separately to the first item in the repeating section, and then individually to each new item in the repeating section - otherwise you end up applying it to the hidden first item (used as a template for new items), which injects the CSS classes for autocomplete into the template - which then means you can't apply it to further items as you add them.

For the first item, run the following:

NWF$(".my_field:eq(1)").autocomplete({source:titles});‍‍‍‍

Then for subsequent items, do the following:

NWF.FormFiller.Events.RegisterRepeaterRowAdded(function (){
    var field_control_id = NWF$(arguments[0][0]).find('.my_field').attr("id");
    NWF$("#" + field_control_id).autocomplete({source: titles});
});‍‍‍‍‍‍‍‍‍‍‍‍

Worth noting that in the above example, ".my_field" is the "Control CSS Class".

I wrote it up in much more depth here...

Setting up jQueryUI Autocomplete in Nintex Forms 

Userlevel 5
Badge +14

Hello Dimiter Sotirov‌,

were you able to resolve your issue?

if so, could you mark a post that helped you as a correct answer?

Badge

Hi Marian ,

if we apply this method means it is working for the clones perfectly but not working for the orginal field...

Badge +1

Do you know if somethign similar would work in SharePoint 2010? 

Reply