Replacing a Drop-Down List in Nintex Forms 2010 with an Autocompleting Textbox – Fix for Version 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 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:


Now becomes:


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):


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

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

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


        source: function(request, response) {

            var autocompleteVals = [];


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

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

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






        minLength: 1,

        select: function(event, ui) {


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

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


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





Hope this helps someone else out struggling with this issue!


About Geoff Varosky
Geoff Varosky is a Senior Architect for Insight, based out of Watertown, MA. He has been architecting and developing web based applications his entire career, and has been working with SharePoint for the past 15 years. Geoff is an active member of the SharePoint community, Co-Founder and Co-Organizer of the Boston Area SharePoint Users Group, co-founder for the Boston Office 365 Users Group, co-organizer for SharePoint Saturday Boston and speaks regularly at SharePoint events and user groups.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: