Page History

In this example, I will using the The example below uses the Autocomplete element of jQueryUI and following this sample code of the element.. 

  Image Added

Figure 1 : Adding a Text Field to the Form

First, adding add a "Text Field" element into to the form as shown in picture below and put the Field Id as "city" as field ID. Image Removed
Figure 1 : Adding a "Text Field" element to the form.

Next, add a Custom HTML element to Then, adding a "Custom HTML" element into the form and copy the following script into the "Custom HTML" property 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 " element to the form and putting in the script in "Custom HTML" property.Script to the Form 

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

Image Added
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>

Image Added
Figure 3 : Completed Auto Complete Field