Autocomplete Text Field

Introduction

This guide demonstrates how to integrate an autocomplete feature into a text field using jQueryUI . By following these steps, you can enhance user experience by providing dynamic suggestions based on user input.

How does it work?

To implement autocomplete functionality, you'll need to add a Text Field element and a Custom HTML element to your form. The provided script uses the jQuery UI library to suggest country names as the user types. When a country is selected, its code is stored in a hidden field.

To implement the autocomplete feature into a text field, follow the steps below:

1. Add a Text Field element to your form and set its Field ID to "country".
   
   
2. Add a Custom HTML element into the form.
3. Copy and paste the following script into the Custom HTML property:
   

   <script>
   var countries= [
     {"label": 'Afghanistan', "code": 'AF'},
     {"label": 'Åland Islands', "code": 'AX'},
     {"label": 'Ecuador', "code": 'EC'},
     {"label": 'Egypt', "code": 'EG'},
     {"label": 'El Salvador', "code": 'SV'},
     {"label": 'Equatorial Guinea', "code": 'GQ'},
     {"label": 'Eritrea', "code": 'ER'},
     {"label": 'Estonia', "code": 'EE'},
     {"label": 'Ethiopia', "code": 'ET'},
     {"label": 'Falkland Islands (Malvinas)', "code": 'FK'},
     {"label": 'Faroe Islands', "code": 'FO'},
     {"label": 'Fiji', "code": 'FJ'},
     {"label": 'Finland', "code": 'FI'},
     {"label": 'France', "code": 'FR'},
     {"label": 'Saudi Arabia', "code": 'SA'},
   ];
    
   $( "#country" ).autocomplete({
       source: countries,
       select: function (event, ui) {
           $("#countries").val(ui.item.code); 
       }
   });
   </script>

   

   1. By default, the js library file of jQuery and jQueryUI is included in the Joget form.
   2. The "country" in "[name$=country]" in the code must be the same as that in your Field ID.
4. Click Preview in the Form Builder.
5. Type a partial name (e.g., "a") to see the autocomplete suggestions.
   

Download sample app