Implementation Of Autocomplete Textbox In NINTEX Forms

Objective

Selecting an item in a huge dropdown list is often annoying. The purpose of this script is to replace the Dropdown list with an Autocomplete Textbox by using existing dropdown values on the NINTEX Forms as source. Dropdown could be a choice field, a lookup column, or an SQL request control.

Approach

For this demo, I have chosen Lookup dropdown as source. The same process will work for SQL control and choice field as well.

Configuration in the NINTEX forms

Controls

• Add a Textbox and Lookup Control to the NINTEX form.
• Configure Textbox and Lookup Control settings as shown below.
• Go to Advanced Settings of the Control and select "Store Client ID in JavaScript variable" as Yes. Then, configure the values as below.
  
  
  • For Textbox - provide autocompleteTextbox as the value.
  • For Dropdown - provide autocompleteDropDown as the value.
    
    
• With this configuration, controls are accessible using JavaScript.

Script Files

• By default, NINTEX included jQuery files, so it is easy and there is no need to refer these files explicitly.

• Here is the script that surrounds the Textbox with autocomplete functionality. Comments in the code explain the purpose.
• Upload this script file to the Site Assets folder.
  
  1. // JavaScript source code
  2. (function ($) {
  3. //Inputs Dropdown ClientID, Textbox client ID, characters length to perform search
  4. $.dropdownAutocomplete = function (dropDown1Id, textboxId, SearchTextLength) {
  5. //Declare Textbox
  6. var textbox = $("#" + textboxId);
  7. //Declare Dropdown
  8. var dropDown1 = $("#" + dropDown1Id.replace("_hid", ""));
  9. //Enabling textbox with Autocomplete
  10. textbox.autocomplete({
  11. //Source can be an Array, String or Function
  12. //Here we are using function as the source type to fetch the values from the dropdown
  13. source: function (request, response) {
  14. autocompleteVals = [];
  15. dropDown1 = $("#" + dropDown1Id.replace("_hid", ""));
  16. // Here data will be filtered based on the text coming through the re-quest
  17. $(dropDown1).children().each(function () {
  18. if ($(this).text() != "(None)" && $(this).text().toLowerCase().indexOf(request.term.toLowerCase()) >= 0) {
  19. autocompleteVals.push($(this).text());
  20. }
  21. });
  22. response(autocompleteVals);
  23. },
  24. //The minimum number of characters a user must type before a search is per-formed
  25. minLength: SearchTextLength,
  27. //Triggered when an item is selected from the menu, now same item will be selected in the dropdown which is a connected field
  28. select: function (event, ui) {
  29. var fieldOption = $("#" + dropDown1Id.replace("_hid", "") + " op-tion").filter(function () {
  30. return $(this).html() == ui.item.value;
  31. });
  33. $(fieldOption).attr("selected", true);
  34. $(dropDown1).change();
  35. }
  36. });
  38. }
  39. })(NWF$)

Configuration in the NINTEX forms

• Now, refer to the uploaded JS file in the Nintex forms.
  
  
• Go to Nintex Form Settings - Advanced - Custom JavaScript Included. Here, provide the url of the autocomplete JS file that is uploaded in the Site Assists lib.

Note - If you have multiple JS files, just press Enter after each file code and paste them.

• On the same page, go to the section Custom JavaScript and pate the below code. This will call the autocomplete function with 3 parameters provided.
  
  1. NWF$(document).ready(function() {
  2. NWF$.dropdownAutocomplete(autocompleteDropDown, autocompleteTextbox, 1);
  3. });

In Action

Here are the values in the Lookup Dropdown.

Once you start typing the text, you will see the results.

Once you select the item from the result, the corresponding item is selected in the dropdown (which is a connected to the list items).

For other Contorls (SQL Request or Choice filed ), you shall follow the same steps - enable client id and call the function in Custom JavaScript section of Nintex forms.

• Here, we are fetching the list of vendors from the SQL vendor table by using SQL Control field as source.
  
  
  

• Here, we are fetching currencies' values declared in the choice itself.
  
  
  

In real-time, it is not required to show the Dropdown. So, hide the Dropdown control. For this, I always place a hidden panel at the bottom of the form and place the control inside of it with some comments for other developers to understand the purpose.

Hope you find this article informative. Happy coding !!!