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 Script to the form and putting in the script in "Custom HTML" property.Form 

After adding After add the script, click on the "Preview" of  in Form Builder. you can type Type "kua" and you will have text field show as the picture below. ; the text field will appear like this:

Figure 3 : Preview and Check Autocomplete Field 

A preview and check on the auto complete field is working or not.The Auto Complete Text Field is working but Autocomplete text field showed that it is working, although it looked a little bit ugly. Next, I will add the following css in the "Custom HTML" element to make the Auto Complete Field look nicerunpleasant.  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 : The completed Completed Auto Complete Field.