The example below uses the Autocomplete element of jQueryUI and this sample code. 

Figure 1 : Adding a Text Field to the Form 

First, add a Text Field element to the form and put "country" as field ID.

Next, add a Custom HTML element to the form and copy 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>



Figure 2 : Adding a Custom HTML Script to the Form 

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 with that in your Field ID.

After adding the script, click on Preview in Form Builder. Type "kua"; the text field will appear like this:



Figure 3 : Preview and Check Autocomplete Field 

  • No labels