Autocomplete a repeating section JQuery

  • 6 March 2018
  • 4 replies
  • 18 views

Badge +1

Hello,

I know this question has been asked before but I just couldn't find a way to use autocomplete in repeating section. I  followed the approach from here and it is working fine, but inside the repeating section it's not.

NWF$(document).ready(function() { 
   NWF$.dropdownAutocomplete(autocompleteDropModule, autocompleteTextModule, 1);});

For the repeating section, the following code from here didn't help: (modRepeater is the CSS class for the repeating section, modTxt is the CSS class for the input text field with the JS class autocompleteTextModule, and modLookup is for the dropdown control with the JS class autocompleteDropModule.

NWF.FormFiller.Events.RegisterRepeaterRowAdded(function(){
var repeaterRow = NWF$(arguments[0][0]);
if(NWF$(repeaterRow.parents('.nf-repeater')[0]).hasClass('modRepeater')){

   $modTxtInput = repeaterRow.find(".modTxt input")[0].id;
   $modTxtLookup = repeaterRow.find(".modLookup select")[0].id;

   NWF$.dropdownAutocomplete($modTxtLookup,
      $modTxtInput, 1);
   }
});

I know I am missing something simple, hopefully someone can provide a solution.

Regards.


4 replies

Userlevel 5
Badge +14

have a look on this

https://community.nintex.com/thread/13750-autocomplete-in-a-repeating-section?commentID=52309#comment-52309 

Badge +1

Hello Marian,

I did take a look at that, however, the solution I am using is taking input from a textbox and looking finding match in a text field. The solution you provided is using only one argument as a source externalParties, so I am using two arguments. How can I adjust it to my solution?  

Thanks.

Userlevel 5
Badge +14

both, your solution and one I linked are basically about the same - you need to build an array of possible autocomplete options and bind it to a proper INPUT DOM element. it doesn't matter how you build it up.

it might be a bit more complex to identify proper element for a control within a repeating section to assign autocomplete handler to, but principally there is no difference to 'plain' control.

if a solution you linked really works for 'plain' controls, it should work for ones within repeating section either.

haven't tested it, just off top of my head:

- as far as I remember, lookup control has 2 select nodes within its DOM model. hopefully something like this should address the proper of two (maybe it could be nf-associated-control instead of nf-client-control; try which one will work)

   $modTxtLookup = repeaterRow.find(".modLookup select.nf-client-control")[0].id;

- I'm not quite sure '.nf-repeater' and '.modRepeater' classes are assigned to the same DOM node. I'd maybe rather tried selector/condition like

repeaterRow.parents('.modRepeater').length > 0

- I doubt about all those "replace("_hid""")" in that 3rd party script. they denote hidden elements. if you attach a handler or set a value for a hidden element you will not visually spot it. likely it needs some further tuning to work (just) on visual elements

let me know if that helped you. if not I may tried to dig into it deeper.

Badge +1

Hello Marian,

sorry for my late reply, first I want to thank you for your help, I had a suspicion about the condition of the loop, both your suggestions where very helpful. The code below is the one I used if anyone is interested:

NWF.FormFiller.Events.RegisterRepeaterRowAdded(function(){ 
  var repeaterRow = NWF$(arguments[0][0]); 
    if(NWF$(repeaterRow.parents('.modRepeater')).length > 0) {
       $modTxtInput  = repeaterRow.find(".modCSS input")[0].id; 
       $modTxtLookup = repeaterRow.find(".lookupCSS select.nf-client-control")[0].id;
       NWF$.dropdownAutocomplete($modTxtLookup, $modTxtInput, 2); 
    }
});

P.S: the lookup column used which is based on a SharePoint list has over 5000 item and it is very fast, when I tried the SPServices solution it keep spinning, which was  the reason I was asking about a way to accomplish it this way. Thanks again for your help.

Reply