Joget DX Preview Release Available for Download

Check out Joget DX, the next generation successor to Joget Workflow for faster, simpler digital transformation.

Skip to end of metadata
Go to start of metadata

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 "city" as field ID.

Next, add a Custom HTML element to the form and copy the following script into the Custom HTML property. 

<script>
    $(function() {
        $( "[name$=city]" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "http://ws.geonames.org/searchJSON",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function( data ) {
                        response( $.map( data.geonames, function( item ) {
                            return {
                                label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                                value: item.name
                            }
                        }));
                    }
                });
            },
            minLength: 2
        });
    });
</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 "city" in "[name$=city]" 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 

A preview and check on the Autocomplete text field showed that it is working, although it looked a little unpleasant.  Adding the following CSS to the Custom HTML improved the way the Autocomplete text field looked.

<style>
    .ui-autocomplete {
        background:#fff;
        border:#000 1px solid;
        list-style:none;
        padding: 5px;
        width: 250px;
    }
    .ui-menu-item:hover{
        background:#9CE9FF;
    }
</style>


Figure 3 : Completed Auto Complete Field

  • No labels