Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

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

Then, adding a "Custom HTML" element into the form and copy the following script into the "Custom HTML" property.

Code Block
<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>

Image Added
Figure 2 : Adding a "Custom HTML" element to the form and putting in the script in "Custom HTML" property.