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". 
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.
<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.
1. The js library file of jQuery and jQueryUI are included in Joget form by default.
2. Please note that the "city" in "[[name$=city]]" in the code must be same with your Field Id.
After add the script, click on the "Preview" of Form Builder. you can type "kua" and you will have text field show as the picture below. 
Figure 3 : Preview and check the auto complete field is working or not.
The Auto Complete Text Field is working but 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 nicer.
<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 Auto Complete Field.