Replacing a Drop-Down List in Nintex Forms 2010 with an Autocompleting Textbox – Fix for Version 1.11.4.0 Update

SharePoint Sig wrote a great post about creating an autocompleting textbox in Nintex Forms 2010 using a Drop-Down list as the source. This was awesome code that did not require much hassle to implement. Until version 1.11.4.0 was released in January of this year.

That is right, this threat that is on every Nintex release finally came to pass:

The changes did indeed require adjustments to custom JavaScript.

We had a client that this functionality broke on, so the SWAT team was called in to figure out a solution. After a few frustrating hours, I was able to figure it out. When configuring your variables that are linked to your textbox and drop-down list, let’s call them simply mylist and mytext for the drop-down list and textbox respectively… the ID for the drop-down list element had changed and added _hid on the end of it. So as an example, the ugly ID for the element:

ctl00_m_g_53210a58_ac0b_4f63_be11_47018c3b62f1_ctl00_ListForm2_formFiller_FormView_ctl26_ca219dc8_8328_4480_b26c_fabd21a218d9

Now becomes:

ctl00_m_g_53210a58_ac0b_4f63_be11_47018c3b62f1_ctl00_ListForm2_formFiller_FormView_ctl26_ca219dc8_8328_4480_b26c_fabd21a218d9_hid

So I needed to add in a replace on the string to fix it:

mylist = mylist.replace("_hid","");

That’s the first issue. The second issue is iterating through the options in the dropdown did no longer work. The original code used the following to iterate through:

        $(dropDown1).children().each(function() {

This was no longer working in our implementation, so we did this:

Now, I tried several (well, a lot more than several) options to get ahold of the element, this seemed to be the only one that worked. I built up the element selector in a variable, and then passed it in:

var dropDownOptions = "#" + mylist + " > option";

NWF$(dropDownOptions).each(function() {

The final code ended up being close to this… this was the working prototype, so it can probably be cleaned up a bit more, but, the most important thing is that it worked (changed bits highlighted):

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

    var textbox = NWF$("#" + mytext);

    mylist = mylist.replace("_hid","");

    var dropDown1 = NWF$("#" + mylist);

       
    textbox.autocomplete({

        source: function(request, response) {

            var autocompleteVals = [];

            console.log("autocomplete1");

           
            var dropDownOptions = "#" + mylist + " > option";

            NWF$(dropDownOptions).each(function() {

                if (NWF$(this).text() != "(None)" && NWF$(this).text().toLowerCase().indexOf(request.term.toLowerCase()) >= 0) {

                    autocompleteVals.push(NWF$(this).text());

                }

            });

           
            response(autocompleteVals);

        },

        minLength: 1,

        select: function(event, ui) {

            console.log("autocomplete3");

            var fieldOption = NWF$("#" + dropDown1Id + " option").filter(function() {

                return NWF$(this).html() == ui.item.value;

            });

           
            NWF$(fieldOption).attr("selected", true);

            NWF$(dropDown1).change();

        }

    })

});   

Hope this helps someone else out struggling with this issue!