AnsweredAssumed Answered

Repeating Section Type-Ahead Textbox instead of a Lookup Dropdown

Question asked by zaki.semar on Sep 6, 2016

Hi,

 

I'm trying to add a type-ahead textbox instead of the default dropdown that appears when a list lookup field is used on Nintex Forms for O365. I am using the approach in the article below and it works perfectly for the first row in the repeating section as I can give the controls an ID by using the advanced control settings and giving it a JS variable name. I have even got it to work when new repeating rows are added by using the NWF RepeaterRowAdding event and figuring out the id value dynamically of the new controls added in the new row.

 

Replacing a Drop-Down List in Nintex Forms with an Autocompleting Textbox Using jQuery | 

 

However, the issue is that when the form is opened in Edit mode, I cannot wire the dropdown to the textbox dynamically as there are no repeating rows being added but they already exist. Effectively, I need a way similar to the approach suggested in the following article whereby I can wire the dropdown and texbox together as suggested in article 1.

get feilds value in repeating section with javascript? 

 

I also need this because once the lookup value is selected, I need to pre-populate a whole lot of field within the repeating row with a runtime lookup calculated field that was released in the last couple of months.

 

In short, Can someone please provide a code sample of how I can cycle through each repeating row and get the IDs of the various fields both on form ready with existing repeating rows and also during row added event? Thanks.

 

My current code:

 

(function($){
$.dropdownAutocomplete = function(dropDown1Id, textboxId) {
var textbox = $("#" + textboxId);
var dropDown1 = $("#" + dropDown1Id);

textbox.autocomplete({
source: function(request, response) {
var autocompleteVals = [];

$(dropDown1).children().each(function() {
if ($(this).text() != "(None)" && $(this).text().toLowerCase().indexOf(request.term.toLowerCase()) >= 0) {
autocompleteVals.push($(this).text());
}
});

response(autocompleteVals);
},
minLength: 1,
select: function(event, ui) {
var fieldOption = $("#" + dropDown1Id + " option").filter(function() {
return $(this).html() == ui.item.value;
});

$(fieldOption).attr("selected", true);
$(dropDown1).change(); // To force cascade to update.
}
});

}
})(NWF$)

 

//Type-ahead functionality for first row 
NWF$(document).ready(function() {
NWF$.dropdownAutocomplete(vehicleLookup, modelCode);
});

 

//Type-ahead functionality for repeating rows when added
NWF.FormFiller.Events.RegisterRepeaterRowAdded(function(){
var repeaterRow = NWF$(arguments[0][0]);
if(NWF$(repeaterRow.parents('.nf-repeater')[0]).hasClass('vehicleRepeater')){


$vehicleModelCodeId = repeaterRow.find(".vehicleModelCode input")[0].id;
$vehicleListLookupId = repeaterRow.find(".vehicleListLookup select")[0].id;

NWF$.dropdownAutocomplete($vehicleListLookupId,
$vehicleModelCodeId);
}
});

Outcomes